v-for指令
- v-for指令的作用是:根据数据生成列表结构
- 数组经常和 v-for结合使用
- 语法是 (item,index) in 数据
- item 和 index 可以结合其他指令一起使用
- 数组长度的更新会同步到页面上,是响应式的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue学习</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="hero in arr">
{{hero}}
</li>
</ul>
<ul>
<li v-for="(hero,index) in arr">
{{index+1}}-->{{hero}}
</li>
</ul>
<h2 v-for="sport in sports">
{{sport.name}}
</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data: {
arr:[
"李白",
"韩信",
"吕布",
"项羽"
],
sports:[
{name:"足球"},
{name:"篮球"},
{name:"网球"}
]
}
})
</script>
</body>
</html>
v-on补充
- 事件绑定的方法写成函数调用的形式,可以传入自定义的参数
- 定义方法时需要定义形参来接收传入的实参
- 事件的后面跟上.修饰符可以对事件进行限制
- .enter可以限制触发的按键为回车
- 事件修饰符有多种
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue学习</title>
</head>
<body>
<div id="app">
<input type="button" value="点击" @click="doIt(666,'老铁')">
<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){
alert(p1+p2)
},
sayHi:function(){
alert("你好!")
}
}
})
</script>
</body>
</html>
点击按钮:
输入结束按回车键:
v-model指令
- v-model指令的作用是便捷的设置和获取表单元素的值
- 绑定的数据会和表单元素的值相关联
- 绑定的数据与表单元素的值双向绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue学习</title>
</head>
<body>
<div id="app">
<input type="text" v-model="message">
<h2>{{message}}</h2>
<input type="button" value="点击" @click="setM">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
message:"Vue程序员"
},
methods:{
setM:function(){
this.message = "前端开发"
}
}
})
</script>
</body>
</html>
初始:
输入时:
点击后: