- 站点信息
- 问题反馈
- 邮箱：[email protected]
- 吐槽一下
关注微信
©2020-2025 ioDraw All rights reserved,
Privacy Policy
v-for的四种使用方法分别是：
1.使用v-for循环一个简单的数组
2.使用v-for循环一个复杂的数组
3.使用v-for循环对象
4.v-for循环一个迭代的数字
<div id="app"> <!--v-for循环一个简单的数组--> <p v-for="item in list">{{item}}</p> <P
v-for="(item ,i) in list">索引值：{{i}}---每一项：{{item}}</P> <!--v-for循环一个复杂的数组--> <p
v-for="(item,i) in list1">索引值：{{i}}--id：{{item.userid}}---姓名：{
{item.username}}</p> <!--v-for循环一个对象--> <p v-for="(val,key,i) in list2">id：{
{val}},name:{{key}},index:{{i}}</p> <!--v-for 循环一个迭代数字--> <p v-for="count in
10">这是第{{count}}次循环</p>
v-for中key的使用注意项
v-for在循环时，key属性只能使用number获取string
key在使用时只能使用v-bind的属性绑定的形式，指定key的值
在组件中使用v-for的时候，或者在一些特殊的时候v-for使用有问题的时候
必须在使用v-for的同时指定唯一的字符或者number类型：key值
<div> <label> id:<input type="text" v-model="id" > </label> <label>
name:<input type="text" v-model="name" > </label> <input type="button"
value="提交" @click="add"> </div> <p v-for="item in list3" :key="item"> <input
type="checkbox"> {{item.id}}------ {{item.name}} </p> </div> <div id="app1"> <p
v-for="(val,key,i) in user ">userid:{{val}}---username:{{key}}---index:{
{i}}</p> </div> <script> var vm = new Vue({ el:'#app', data:{ id:'', name:'',
list:[1,2,3,4,5,6,7,8], list1:[ { userid:1,username:'zs1'}, {
userid:2,username:'zs2'}, { userid:3,username:'zs3'}, {
userid:4,username:'zs4'} ], list2:{ id:1232, name:'托尼.琼斯', gender:'female' },
list3:[ {id:1,name:'项羽'}, {id:2,name:'刘备'}, {id:3,name:'诸葛亮'},
{id:4,name:'曹操'}, {id:5,name:'赵子龙'}, ] }, methods:{ add(){ //
this.list3.push({id:this.id,name:this.name});
this.list3.unshift({id:this.id,name:this.name}); } } }); </script>