Vue学习day05--v-for循环标签及v-if和v-show标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 <div id="app">
<p v-for="(item,i) in list">索引：{{i}}===>该项值为：{{item}}</p>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
list:[1,2,3,4,5,6,7,8,9,10]
},
methods:{
}
})
</script>
效果如下：
索引：0===>该项值为：1
索引：1===>该项值为：2
索引：2===>该项值为：3
索引：3===>该项值为：4
索引：4===>该项值为：5
索引：5===>该项值为：6
索引：6===>该项值为：7
索引：7===>该项值为：8
索引：8===>该项值为：9
索引：9===>该项值为：10

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div id="app">
<p v-for="(item,i) in list">索引：{{i}}===>ID为：{{item.id}}=====姓名为:{{item.name}}</p>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
list:[
{id:1,name:'张三'},
{id:2,name:'李四'},
{id:3,name:'王五'}
]
},
methods:{
}
})
</script>
效果如下：
索引：0===>ID为：1=====姓名为:张三
索引：1===>ID为：2=====姓名为:李四
索引：2===>ID为：3=====姓名为:王五s

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div id="app">
//索引i可去除
<p v-for="(val,key,i) in user">键为：{{key}}=====值为:{{val}}======索引：{{i}}</p>
</div>
<script>
var vm = new Vue({
el:"#app",
data: {
user: {
id: 1, name: '张三',sex:'男'
}
},
methods:{
}
})
</script>
效果如下：
键为：id=====值为:1======索引：0
键为：name=====值为:张三======索引：1
键为：sex=====值为:男======索引：2

1
2
3
4
5
 <p v-for="count in 3">循环次数：{{count}}</p>
效果如下：
循环次数：1
循环次数：2
循环次数：3

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

<div id="app">
<div>
<label>ID:
<input type="text" v-model="id">
</label>
<label>姓名:
<input type="text" v-model="name">
</label>
<input type="button" value="添加" @click="add">
</div>
<p v-for="item in list" :key="item">
<input type="checkbox">{{item.id}}======>{{item.name}}
</p>
</div>
<script>
var vm = new Vue({
el:"#app",
data: {
list:[
{id:1,name:"张三"},
{id:2,name:"李四"},
{id:3,name:"赵六"},
]
},
methods:{
add: function(){
this.list.push({id:this.id,name:this.name})
}
}
});
</script>

1
2
3
<p v-for="item in list">
<input type="checkbox">{{item.id}}======>{{item.name}}
</p>

1
2
3
4

<p v-for="item in list" :key="item">
<input type="checkbox">{{item.id}}======>{{item.name}}
</p>