v-for循环普通数组
v-for循环对象数组
v-for循环对象
v-for迭代数字
v-for循环中key属性的使用
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="./lib/vue-2.4.0.js"></script></head><body><div id="app"><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><!-- 注意： v-for 循环的时候，key 属性只能使用 number获取string --><!-- 注意： key 在使用的时候，必须使用 v-bind 属性绑定的形式，指定 key 的值 --><!-- 在组件中，使用v-for循环的时候，或者在一些特殊情况中，如果 v-for 有问题，必须 在使用 v-for 的同时，指定 唯一的 字符串/数字 类型 :key 值 --><p v-for="item in list" :key="item.id"><input type="checkbox">{{item.id}} --- {{item.name}}</p></div><script>// 创建 Vue 实例，得到 ViewModelvar vm = new Vue({el: '#app',data: {id: '',name: '',list: [{ id: 1, name: '李斯' },{ id: 2, name: '嬴政' },{ id: 3, name: '赵高' },{ id: 4, name: '韩非' },{ id: 5, name: '荀子' }]},methods: {add() { // 添加方法this.list.unshift({ id: this.id, name: this.name })}}});</script></body></html>
