Vue，for循环的key值绑定

Posted 2022-01-03 wo1ow1ow1

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue，for循环的key值绑定相关的知识，希望对你有一定的参考价值。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6     </head>
 7     <script src="../js/vue.js"></script>
 8     <body>
 9         <div id="app">
10             
11             <!-- 尾部添加
12             <div>
13                 <label for="">
14                     ID:
15                     <input type="text" v-model="id" />
16                 </label>        
17             
18                 <label for="">
19                     Name:
20                     <input type="text" v-model="name" />
21                 </label>
22                         
23                 <input type="button" name="" id="" value="尾部添加" @click="wadd"/>
24             </div> -->
25             
26             <div>
27                 <label for="">
28                     ID:
29                     <input type="text" v-model="id" />
30                 </label>        
31                             
32                 <label for="">
33                     Name:
34                     <input type="text" v-model="name" />
35                 </label>
36                 
37                 <input type="button" name="" id="" value="头部添加" @click="tadd"/>
38             </div>
39         
40             <!-- 注意： v-for 循环的时候， key属性  只能用number 或 string， item是个对象 不能使用-->
41             <!-- 注意：key在使用的时候，必须使用  v-bind  属性绑定，指定  key  的值-->
42             <!-- 在组件中， 使用 v-for循环的时候，或者在一些特殊情况中，如果 v-for 有问题，必须 在使用
43              v-for 的同时，指定 唯一的 字符串/数字 类型 ：key 值  比如如果不绑定的话 多选按钮 无法绑定
44              item数组里的选中的数据-->
45             <p v-for="item in list" :key="item.id">
46                 <input type="checkbox" />
47                  item.id ---  item.name 
48             </p>
49         </div>
50     </body>
51 </html>
52 <script>
53     var vm = new Vue(
54         el:‘#app‘,
55         data:
56             id:‘‘,
57             name:‘‘,
58             list:[
59                  id: 1, name: ‘哈哈‘ ,
60                  id: 2, name: ‘嘿嘿‘ ,
61                  id: 3, name: ‘呵呵‘ ,
62                  id: 4, name: ‘啦啦‘ ,
63                  id: 5, name: ‘叽叽‘ 
64             ]
65         ,
66         methods:
67             // // 尾部添加
68             // wadd()
69             //     this.list.push( id: this.id, name: this.name)
70             // ,
71             //头部添加
72             tadd()
73                 this.list.unshift( id: this.id, name: this.name)
74             ,
75         
76     )
77 </script>

效果图就不放了，最近太忙，uni-app十分紧急需要弄，这个主要就是讲的key的绑定，可以理解为选中的多选按钮与数组的key 绑定，以免数据混乱

以上是关于Vue，for循环的key值绑定的主要内容，如果未能解决你的问题，请参考以下文章

Vue中 v-for 绑定key和不绑定key的区别