Vue基础（下）
2020-11-02 本文已影响0人
仙姑本姑
（一）v-for
v-for作用：根据数据生成列表结构
数组常与v-for结合使用
语法常常是（item,index) in 数据
可以实现响应式的动态列表
<body>
<div id="app">
<ul>
<li v-for="(item,index) in arr">
{{index}}{{item}}
</li>
</ul>
<input type="button" value="添加数据" @click="add">
<input type="button" value="删除数据" @click="remove">
<h2 v-for="it in menu" :title='it.name'>{{it.name}}</h2>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
arr: ['西安', '汉中', '宝鸡', '渭南'],
menu: [{
name: '厚切安格斯'
}, {
name: '年糕鱼饼'
}, {
name: '小八爪'
}]
},
methods: {
add: function() {
this.menu.push({
name: "辣白菜"
});
},
remove: function() {
this.menu.shift();
// 默认删除最左边一个数据
}
}
})
</script>
</body>
（二）v-on传递自定义参数与事件修饰符
回车等触键触发文档：https://cn.vuejs.org/v2/api/#v-on
事件绑定的方法写成函数调用的形式，可以传入自定义参数
定义方法时需要定义形参来接收传入的实参
事件后边跟上.修饰符可以对事件进行限制，如.enter可以限制触发的按键为回车
<body>
<div id="app">
<input type="button" value="点击" @click="doIt(1,2)">
<input type="text" @keyup.enter="sayHi">
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
methods: {
doIt: function(p1, p2) {
console.log(p1, p2, "做it")
},
sayHi: function() {
alert("吃了没")
// 直接与click绑定还未输入就会弹出，应该设置类似敲击回车触发
}
}
})
</script>
</body>
（三）v-model获取和设置表单元素的值（双向数据绑定）
v-model作用是便捷得设置和获取表单元素的值
绑定的数据会和表单元素值相关联，双向绑定，无论修改谁另外一个都会同步更新
<body>
<div id="app">
<input type="text" v-model='message'>
<h2>{{message}}</h2>
<!-- h2与input可以实时同步>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
message: '黑马'
}
})
</script>
</body>
http://ww1.sinaimg.cn/large/75193f28ly1gkaxbaoervj206t03ejr5.jpg
效果图.jpg
