v-的指令（1）
v-for=" " 循环
v-model=" " 数据的双向绑定
v-on: 事件=" 函数名" 绑定事件
v-for 循环制作表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="itany">
<table border="1" cellspacing="0">
<thead>
<tr>
<th>名字</th>
<th>年龄</th>
<th>朋友</th>
</tr>
</thead>
<tbody>
<tr v-for="val in msg">
<td>{{val.name}}</td>
<td>{{val.age}}</td>
<td>{{val.friend}}</td>
</tr>
</tbody>
</table>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#itany",
data:{
msg:[{
name:"jack",age:"18",friend:"rose"
},
{
name:"rose",age:"18",friend:" jack"
}]
}
})
</script>
</body>
</html>
下图实例
1.png
v-model 双向数据绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="itany">
<input v-model="msg">
<p>{{msg}}</p>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#itany",
data:{
msg:"你好"
}
})
</script>
</body>
</html>
2.png
v-on 点击事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="itany">
<button v-on:click="open">点击</button>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#itany",
data:{
msg:""
},
methods:{
open:function (){
alert("al")
}
}
})
</script>
</body>
</html>
3.png
v-on2 切换
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="itany">
<p>{{msg}}</p><button v-on:click="h">切换</button>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#itany",
data:{
msg:"你好"
},
methods:{
h:function(){
this.msg="hello"
}
}
})
</script>
</body>
</html>
4.png
5.png
点击切换 上图的 你好 变成了 hello
添加和删除
1.添加
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="itany">
<input v-model="arrs"><button v-on:click="add">添加</button>
<ul>
<li v-for="val in arr">{{val}}</li>
</ul>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#itany",
data:{
arr:["吃饭","睡觉","打游戏"],
arrs:""
},
methods:{
add:function(){
this.arr.push(this.arrs),
this.arrs=""//清空input
}
}
})
</script>
</body>
</html>
2.删除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="itany">
<input v-model="arrs"><button v-on:click="add">添加</button>
<ul>
<li v-for="(val,index) in arr">{{val}}<button @click="splice(index)">删除</button></li>
</ul>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#itany",
data:{
arr:["吃饭","睡觉","打游戏"],
arrs:""
},
methods:{
add:function(){
this.arr.push(this.arrs),
this.arrs=""//清空input
},
splice:function(index){
this.arr.splice(index,1)
}
}
})
</script>
</body>
</html>
网友评论