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>

技术
下载桌面版
GitHub
百度网盘(提取码:draw)
Gitee
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:ixiaoyang8@qq.com
QQ群:766591547
关注微信