Vue's conditional statement & loop statement---kalrry
1. v-if conditional statement
1. v-if
<div id="app">
<p v-if="ok">v-if条件判读</p>
</div>
<script>
new Vue({
el: '#app',
data: {
ok: true
}
})
</script>
2. v-else
Randomly generate a number, determine whether it is greater than 0.5, and then output the corresponding information:
<div id="app">
<p v-if="Math.random()>0.5">
Sorry</p>
<p v-else>Not Sorry</p>
</div>
<script>
new Vue({
el: '#app'
})
</script>
3. v-else-if
Use with v-if to form an if-else if-else structure
<div id="app">
<p v-if="grade>=85">优秀</p>
<p v-else-if="grade>=70 && grade<850">良好</p>
<P v-else-if="grade>=60 && grade<70">及格</P>
<p v-else>不及格</p>
</div>
<script>
new Vue({
el: '#app',
data:{
grade: Math.random()*100
}
})
4. v-show
We can also use the v-show directive to display elements conditionally
<div id="app">
<p v-show="ok">我们也可以使用 v-show 指令来根据条件展示元素</p>
</div>
<script>
new Vue({
el: '#app',
data: {
ok: true
}
})
</script>
2. v-for loop instruction
The v-for directive requires a special syntax of the form site in sites, where sites is an array of source data and site is an alias for array element iteration.
1. Example: v-for loop array rendering list
<div id="app">
<li v-for="item in browser">{
{
item.name}}</li>
</div>
<script>
new Vue({
el: '#app',
data: {
browser:[{
name: 'Chrome' },{
name: 'IE' },{
name: 'FireFox' }]
}
})
</script>
2. Example: v-for loop object rendering list
<div id="app">
<ul>
<li v-for="value in object">
{
{
value }}
</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
object: {
name: '菜鸟教程',
url: 'http://www.runoob.com',
slogan: '学的不仅是技术，更是梦想！'
}
}
})
</script>
3. Example: Use the second parameter as the key name
<div id="app">
<li v-for="(value,key) in person">{
{
key}}：{
{
value}}</li>
</div>
<script>
new Vue({
el: '#app',
data: {
person: {
name: "Tom",
age: 16,
sex: "男"
}
}
})
</script>
4. Example: use the third parameter as an index
<div id="app">
<li v-for="(value,key,index) in person">{
{
key}}：{
{
value}}--->{
{
index}}</li>
</div>
5. Example: v-for loop to create a list of integers
<div id="app">
<li v-for="num in 10">{
{
num}}</li>
</div>