vue中v-on和v-model的运用
2018-09-14 本文已影响0人
信不由衷
1.v-model的双向绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 注释：v-model：双向绑定数据主要用于表单元素-->
<div id="itany">
<input type="" v-model="msg">
<p>{{msg}}</p>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#itany",
data:{
msg:''
}
})
</script>
</body>
</html>
2.v-on的事件绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="itany">
<p>{{msg}}</p>
<button v-on:click="alt">点击一下</button>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#itany",
data:{
msg:"hello"
},
methods:{
alt:function(){
/*alert("haha")*/
this.msg="你好"
}
}
})
</script>
</body>
</html>
3.向数组中添加或者删除元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script src="js/vue.js"></script>
<script>
/*var arr=[1,2,3]
var arrs=[4,5] push()给数组 mowei
var a=arr.push(arrs)
console.log(arr)*/
/* var arr=[1,2,3]
var arrs=[4,5]
arr.unshift(arrs)
console.log(arr)*/
</script>
</body>
</html>
4.补充
push（）给数组末尾添加元素,
pop（）始终删除数组最后一个元素,
unshift（）给数组开头添加一个元素，
shift（）始终删除数组开头的元素，
splice（）从数组中删除元素，
splice（index,n）从哪个开始删除，删除几个，
5.v-on 和 v-model的结合使用制作添加删除元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<div id="itany">
<input type="" v-model="m">
<button v-on:click="atl">添加</button>
<ul>
<li v-for="(val,index) in msg">{{val}}
<button v-on:click="det(index)">删除</button>
</li>
</ul>
</div>
</head>
<body>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#itany",
data:{
msg:["吃饭","睡觉","打豆豆"],
m:""
},
methods:{
atl:function(){
this.msg.push(this.m)
},
det:function(a){
this.msg.splice(a,1)
}
}
})
</script>
</body>
</html>
