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指令的作用是便捷的设置和获取表单元素的值。
绑定元素的值会和表单元素的值相关联。
绑定数据和表单元素的值是双向绑定的。