划重点v-for中key标识当前对象元素的唯一身份绑定key (v-bind:key“item” )数组的添加push / unshiftpush:把添加添加到数组的末尾– 也就是数组末尾累加unshift:把元素添加到数组的首位千张一份!DOCTYPEhtmlhtml langenheadmeta charsetUTF-8meta nameviewportcontentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatiblecontentieedgetitlev-for中key属性的使用/titlescript src./lib/vue-2.6.10.js/script/headstyle.div_p{font-size:1.5rem}.text_red{color:red;}/stylebodydiv idapppclasstext_red div_p实现的功能要求对数组添加元素/pdiv stylebackground-color: rgb(213, 213, 226) ; width: 60% ;height: 350pxlabelId:input typetextv-modelid/labellabelName:input typetextv-modelname/labelinput typebuttonstylewidth: 10% ;value添加v-on:clickaddList/div!--注意这里的 key:key 标示当前对象元素的唯一身份******不使用key的情况 为了观察区别我们在代码中添加了一个 checkbox;当向数组的末尾添加一个元素 array.push(元素...)前 我们选中一个checkbox;这个时候添加后发现新数组中选中的那个元素的checkboxs是没有错乱的 ⚠️ 注意当我们在 数组的首位添加元素 array.unshift(元素...)前我们也选择一个元素的checkbox,这个时候 观察添加首位元素后 之前被选中的 checkbox 发生乱错乱?******使用 key那么解决方式是我们绑定(使用)key:就是说我们把 元素和 checkbox 绑定在一起 这样无论元素如何添加 其选择的checkbox 都是和 对应的元素已经绑定过了这样就不会出现错乱的问题了 注意⚠️⚠️⚠️在 版本2.2.02.2.0以后的版本里面版本里当在组件中使用v-for时key 是必须要添加的 我们有必要相信如果使用 key 是一定不会出现错乱的情况的但是如果不使用 绑定 key 那么 就有可能出现错乱的情况所以为什么我们不使用一下呢 结论就是在使用v-for的组件的时候 尽可能的使用 key--pclasstext_redv-for(itme , index ) in listObj:keyitmeinput typecheckboxId:{{itme.id}}Name:{{itme.name}}索引{{index}}/phrul v-for(itme , index ) in listObj:keyitmeliId:{{itme.id}}Name:{{itme.name}}/li/ulhrhrul!--在template上使用 v-for:类似于 v-if你也可以利用带有 v-for的template来循环渲染一段包含多个元素的内容。比如--template v-for(item1 , index ) in listObjli{{item1.name}}---/lili{{item1.id}}---/li/template/uldiv idexample-6select v-modelselectedmultiple stylewidth: 50px;optionA/optionoptionB/optionoptionC/option/selectbrspanSelected:{{selected}}/span/div/divscriptvarvmnewVue({el:#app,data:{id:null,name:null,listObj:[{id:1,name:zs1},{id:2,name:zs2},{id:3,name:zs3},{id:4,name:zs4},{id:5,name:zs5}],selected:[]},methods:{addList(){// this.listObj.push({id:this.id, name:this.name }) ;//把元素添加到数组的 末尾也就是末尾累加this.listObj.unshift({id:this.id,name:this.name});//把元素添加到数组的首位}}})/script/body/html图例