Home > Developer > Web Develop
Demo1
[HTML] View plain copy
<! DOCTYPE html>
<meta charset= "Utf-8" >
<title>hello vuejs</title>
<script src= "Vue.min.js" ></script>
<body>
<div id= "App" >
{{Message}}
</div>
<script>
New Vue ({
El: ' #app ',
Data: {
Message: ' Hello world! '
}
});
</script>
</body>
Demo2
[HTML] View plain copy
<div id= "App" >
<p>{{message}}</p>
<!--does not change--
<p>{{* message}}</p>
<!--strings Connected--
<p>{{message + ' official address: www.qq.com '}}</p>
<!--string inversion--
<p>{{message.split ("). Reverse (). Join (')}}</p>
<input v-model= "Message" >
</div>
<script src= "App.js" ></script>
[HTML] View plain copy
App.js
New Vue ({
El: ' #app ',
Data: {
Message: ' Hello world! '
}
})
DEMO3 List Output
[HTML] View plain copy
<div id= "App" >
<ul>
<li v-for= "Todo in Todos" >
{{Todo.text}}
</li>
</ul>
</div>
<script>
New Vue ({
El: ' #app ',
Data: {
Todos: [
{text: ' 1 '},
{text: ' 2 '},
{text: ' 3 '}
]
}
})
</script>
Demo4 Multidimensional Arrays
[HTML] View plain copy
<div id= "App" >
<ul id= "Example-2" >
<li v-for= "Item in Items" >
{{Parentmessage}}-{{$index}}-{{item.message}}
</li>
</ul>
<script>
var example2 = new Vue ({
El: ' #example-2 ',
Data: {
Parentmessage: ' Hello ',
Items: [
{message: ' Jay Chou '},
{message: ' Peng '}
]
}
})
</script>
Demo5 condition judgment
[HTML] View plain copy
<div id= "App" >
<div v-if= "Math.random () > 0.5" >
Random number greater than 0.5
</div>
<div v-else>
Random number not greater than 0.5
</div>
</div>
<script>
New Vue ({
El: ' #app '
})
</script>
Note----About Vue.js
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
