1.v-for指令
根据数据生成列表结构
语法：
<div id="app"> <ul> <li v-for="(item,index)in arr"> {{index}}{{item}} </li> <li v-for ="{{item,index}} in objArr"> {{item.name}} </li> </ul> </div> 复制代码
var app = new Vue({ el:"#app", data:{ arr:[1,2,3,4,5], objArr:[ {name:"jack"}, {name:"rose"} ] } }) 复制代码
// 源码： <body> <div id="app"> <input type="button" value="增加数据" @click="add"> <input type="button" value="移除数据" @click="remove"> <ul> <li v-for="(item,index) in arr">{{index+1}}四大名著是{{item}}</li> </ul> <h2 v-for="item in person" :title="item.name">{{item.name}}</h2> </div> <script> var app = new Vue({ el: "#app", data: { arr: ["西游记", "三国演义", "水浒传", "红楼梦"], person: [ { name: "孙悟空" }, { name: "猪八戒" }, { name: "沙和尚" } ] }, methods: { add: function () { this.person.push({ name: "唐僧" }) }, remove: function () { this.person.shift() } } }) </script> </body>
总结：
- v-for指令的作用是：根据数据生成列表结构。
- 数组经常和v-for指令结合使用。
- 语法是(item,index)in数据。
- item和index可以结合其他指令一起使用。
- 数组长度的更新会同步到页面上，是响应式的。
2.v-on补充
传递自定义参数，事件修饰符
语法：
<div id="app"> <input type="button" @click="doIt(p1,p2)"> <input type="button" @keyup.enter="sayHi"> </div> 复制代码
var app =new Vue({ el:"#app", data:{ }, methods:{ doIt:function(p1,p2){}, sayHi:function(){} } }) 复制代码
// 源码 <body> <div id="app"> <input type="button" value="传递参数" @click="doIt('老铁',666)"> <input type="text" @keyup.enter="sayHi"> </div> <script> var app = new Vue({ el: "#app", data: { }, methods: { doIt: function (p1, p2) { alert(p1); alert(p2) }, sayHi: function () { alert("Hello") } } }) </script> </body> 复制代码
总结：
事件绑定的方法写成函数调用的形式，可以传入自定义参数。
定义方法的时候需要定义形参来接受传入的实参。
事件的后面跟上.修饰符可以对事件进行限制。
.enter可以限制触发事件的按键为回车。
3.v-model指令
获取和设置表单元素的值（双向数据绑定）
语法：
<div id="app"> <input type="text" v-model="message" /> </div> 复制代码
var app = new Vue({ el: "#app", data: { message: "前端人永不言弃" } }) 复制代码
这里数据是双向绑定的哦！
总结：
v-moel指令的作用是便捷的设置和获取表单元素的值。
绑定元素的值会和表单元素的值相关联。
绑定数据和表单元素的值是双向绑定的。
