前言
本篇将本地应用最后一部分写出来,以便大家学习。
一、列表循环,表单元素绑定
1.v-for
根据数据生成列表结构
数组经常和v-for结合使用
语法是(item,index)in 数据
item和index可以结合其他指令一起使用
数组长度的更新会同步到页面上,是响应式的
❤注意:vue是基于数据开发,数据更新后会同步更新到页面,这是与dom有很大的区别
代码实例
<!-- v-for="dict in List"
:key="dict.id"//唯一值
:label="dict.name"//显示的值
:value="dict.id"//传给后台的值
-->
<div id="app">
<input type="button" value="添加数据" @click="add">
<input type="button" value="移除数据" @click="remove">
<ul>
<li v-for="(it,index) in arr">
{{index+1}} 李奕赫{{it}}
</li>
</ul>
<h2 v-for="it in beer" v-bind:title="it.name">
{{it.name}}
</h2>
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app=new Vue({
el:"#app",
data:{
arr:["帅","很帅","超级帅","帅到爆炸"],
beer:[{name:"雪花"},{name:"大乌苏"}]
},
methods:{
add:function (){
this.beer.push({name:"1664"})
},
remove:function (){
this.beer.shift();
}
}
})
</script>
展示结果:
1、首先可以看出v-for “语法是(item,index)in 数据”,index是索引会自动增加
2、it是我们自己设置的变量,可以更换
3、点击按钮增加和减少arr数组中的元素,因为vue是实时更新数据,只要数据发生改变,更新页面后,页面也会随之发生改变!
2.v-on补充
https://cn.vuejs.org/v2/api/#v-on 事件修饰符
传递自定义参数,事件修饰符
事件绑定的方法写成函数调用的形式,可以传入自定义参数
定义方法时需要定义形参来接收传入的实参
事件的后面跟上.修饰符可以对事件进行限制
.enter可以限制触发的按键为回车
事件修饰符有多种
代码实例
<div id="app">
<input type="button" value="点击" @click="It(666,'对对对')">
<input type="text" @keyup.enter="sayHi">
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app=new Vue({
el:"#app",
methods:{
It:function (p1,p2){
console.log("李奕赫帅!");
console.log(p1);
console.log(p2);
},
sayHi:function (){
alert("吃了吗您");
}
}
})
</script>
效果展示
1、@keyup.enter代表键盘按下回车后触发事件。
2、@keyup.enter就是一个事件修饰符,我们平常不可能记住所有的东西,根本不可能,所以这里给大家提供一个网站供大家搜索。
https://cn.vuejs.org/v2/api/#v-on 事件修饰符
3.v-model
获取和设置表单元素的值(双向数据绑定)
v-model指令的作用是便捷的设置和获取表单元素的值
绑定的数据会和表单元素值相关联
绑定的数据<—>表单元素的值
需要注意:是双向绑定
代码实例
<div id="app">
<input type="button" value="修改message" @click="setMessage">
<input type="text" v-model="message" @keyup.enter="getMessage">
<h2>{{message}}</h2>
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app=new Vue({
el:"#app",
data:{
message:"李奕赫帅!"
},
methods:{
getMessage:function (){
alert(this.message);
},
setMessage:function (){
this.message="李奕赫超级帅!!!";
}
}
})
</script>
效果实现:
1、因为v-model绑定message,所以当输入框中的数据改变时,下方的message也会随之改变
2、当点击按钮时,触发事件,message值改变,又因为v-model是双向的,所以输入框中的数据也会改变
总结
本文介绍了本地应用的最后一点,下一篇将会介绍vue的网络应用,使用vue+axios