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 绑定，以免数据混乱
原文地址：https://www.cnblogs.com/wo1ow1ow1/p/11002920.html
时间： 2024-08-29 23:24:37