07Vue循环语句
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>v-text,v-html指令</title> <script src="node_modules/vue/dist/vue.js"></script> </head> <body> <div id="app"> <!--v-for是Vue中的遍历循环指令 item别名 index索引值 --> <!--遍历普通数组--> <span v-for="(item,index) in list"> 当前索引{{index}}值{{item}} </span> <br> <!--遍历对象数组--> <span v-for="(obj,index) in objectList"> 当前索引{{index}}值 {编号:{{obj["id"]}}姓名：{{obj["name"]}}} </span> <br> <!--遍历对象数组--> <span v-for="(obj,index) in objectList"> 当前索引{{index}}---------值 {编号:{{obj.id}}姓名：{{obj.name}}} <br></span> <br> <div> <input type="text" name="" id="" v-model="id"> <input type="text" name="" id="" v-model="name"> <button @click="add">添加</button> </div> <!--key 在V-for中表示唯一表示--> <p v-for="(obj,index) in objectList" :key="item.id"> <input type="checkbox" name="" id="">{{obj.id}}-----{{obj.name}} </p> </div> <script> var vm = new Vue({ el: '#app', data: { list: [1, 2, 3, 4, 5, 6], objectList: [ { id: 1, name: "张三" }, { id: 2, name: "李四" }, { id: 3, name: "王五" }, { id: 4, name: "赵六" }, ], id:'', name:'' },methods: { add(){ const obj={id:this.id,name:this.name} this.objectList.unshift(obj); } }, }) </script> </body> </html>
所需依赖：npm i vue
源码：http://files.cnblogs.com/files/sansui/07Vue%E5%BE%AA%E7%8E%AF%E8%AF%AD%E5%8F%A5.zip
浙公网安备 33010602011771号