一、v-for 指令
- 作用:
- 根据数据生成列表结构
二、代码演示
1、在li标签中获取数组元素
-
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <div id="app"> <ul> <!-- 在li标签中获取数组元素 --> <li v-for="(item, index) in arr">{{index+1}}.动物：{{item}}</li> </ul> </div> </body> <script src="js/vue.min.js"></script> <script> var Vm = new Vue({ el: "#app", data: { //普通数组 arr: ["猫", "狗", "长颈鹿"], }, methods: {}, }); </script> </html> -
测试结果：
2、v-for 结合 v-bind一起使用，显示对象
-
修改代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <div id="app"> <ul> <!-- 在li标签中获取数组元素 --> <li v-for="(item, index) in arr">{{index+1}}.动物：{{item}}</li> </ul> <br /> <!-- v-for 结合 v-bind一起使用，显示对象 --> <h2 v-for="p in objArr" v-bind:title="p.age">{{p.name}}</h2> </div> </body> <script src="js/vue.min.js"></script> <script> var Vm = new Vue({ el: "#app", data: { //普通数组 arr: ["猫", "狗", "长颈鹿"], objArr: [ { name: "张三", age: 18 }, { name: "李四", age: 20 }, ], }, methods: {}, }); </script> </html> -
测试结果
3、数组的添加和减少
-
代码修改
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <div id="app"> <ul> <!-- 在li标签中获取数组元素 --> <li v-for="(item, index) in arr">{{index+1}}.动物：{{item}}</li> </ul> <br /> <!-- v-for 结合 v-bind一起使用，显示对象 --> <input type="button" value="增加" @click="add" /> <input type="button" value="减少" @click="remove" /> <h2 v-for="p in objArr" v-bind:title="p.age">{{p.name}}</h2> </div> </body> <script src="js/vue.min.js"></script> <script> var Vm = new Vue({ el: "#app", data: { //普通数组 arr: ["猫", "狗", "长颈鹿"], objArr: [ { name: "张三", age: 18 }, { name: "李四", age: 20 }, ], }, methods: { add: function () { this.objArr.push({ name: "钱七", age: 38 }); }, remove: function () { this.objArr.shift(); }, }, }); </script> </html>数组的长度变化,会同步更新到页面上 , 是响应式的。
