一、列表循环、表单元素绑定
1、v.for-根据数据生成列表结构
例1:循环访问数据
<!--本地应用-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-for</title>
</head>
<body>
<div id="app">
<!-- html代码循环访问数组数据-->
<ul>
<li v-for="(it,index) in arr">
{{ index+1 }} 测试测试:{{it}}
</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
// 定义数据
arr:['重庆','上海','广州','长沙'],
},
})
</script>
</body>
</html>
运行结果:
例2-响应式添加移除数据
<!--本地应用-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-for</title>
</head>
<body>
<div id="app">
<!-- html代码-定义2个按钮进行添加、移除数据操作-->
<input type="button" value="添加数据" @click="add">
<input type="button" value="移除数据" @click="remove">
<!-- html代码-展示数据-->
<h2 v-for="item in vegetables" v-bind:title="item.name">
{{item.name}}
</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
// 定义对象数据
vegetables:[
{name:"测试1"},
{name:"测试2"} ]
},
//定义添加、移除数据方法
methods:{
add:function (){this.vegetables.push({name:"我是添加数据"}); },
remove:function (){this.vegetables.shift();}
},
})
</script>
</body>
</html>
总结:
v-for指令的作用是:根据数据生成列表结构
数组经常和v-for结合使用
语法是(item,index) in 数据
item和index可以结合其他指令一起使用
数组长度的更新会同步到页面上,是响应式的
2、v.on补充-传递自定义参数,事件修饰符
例-点击响应
<!--本地应用-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-for</title>
</head>
<body>
<div id="app">
<input type="button" value="点击" @click="doIt('测试1','测试2')">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
methods:{
doIt:function (p1,p2){
console.log("测试");
console.log(p1,p2); }
},
})
</script>
</body>
</html>
运行结果:
例2- 输入后回车键时响应
<!--本地应用-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-for</title>
</head>
<body>
<div id="app">
<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:{
sayhi:function (){
alert('测试测试') }
},
})
</script>
</body>
</html>
运行结果:
总结:
事件绑定的方法写成函数调用的形式,可以传入自定义参数
定义方法时需要定义形参来接收传入的实参
事件的后面跟上.修饰符 可以对事件进行限制
.enter可以限制触发的按键为回车
事件修饰符有多种
3、v.model-获取和设置表单元素的值(双向数据绑定)
<!--本地应用-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v.model</title>
</head>
<body>
<div id="app">
<!-- 改变表单元素的值后message同步更新-->
<input type="button" value="修改message" @click="setM">
<!-- 改变表message值后表单元素同步更新-->
<input type="text" v-model="message" @keyup.enter="getM">
<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:{
//获取message
getM:function (){alert(this.message); },
//更改message
setM:function (){this.message='测试setm';}
},
})
</script>
</body>
</html>
运行结果:
总结:
v-model指令的作用是便捷的设置和获取表单元素的值
绑定的数据会和表单元素值相关联
绑定的数据、表单元素的值是双向绑定,无论改变谁另一个都会被改变