vue.js指令 v-on v-model
2018-09-14 本文已影响0人
执念_6afc
1
v-on绑定事件 v-on：click=" "
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='itany'>
<button v-on:click='alt'>点击</button>
</div>
<script src='js/vue.js'></script>
<script>
var vm=new Vue({
el:'#itany',
data:{
msg:'hello vue'
},
methods:{//存放函数(方法)
alt:function(){
// console.log(this.msg)
console.log(vm.msg)
}
}
})
</script>
</body>
</html>
2
v-on与v-model v-for 同用添加删除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='itany'>
<input type="text" v-model="list">
<button v-on:click='add'>添加</button>
<ul>
<li v-for="(value,index) in arr">{{value}}<button v-on:click='delt(index)'>删除</button></li>
</ul>
</div>
<script src='js/vue.js'></script>
<script>
new Vue({
el:'#itany',
data:{
arr:['吃饭','睡觉','打游戏'],
list:'',
},
methods:{
add:function(){
this.arr.push(this.list),
this.list=''
},
delt:function(ind){
this.arr.splice(ind,1);
}
}
})
</script>
</body>
</html>
13987258-427a36f1c2b1227a.png
3
点击切换
<!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>
var vm=new Vue({
el:'#itany',
data:{
msg:'hello vue',
mess:'你好'
},
methods:{//存放函数(方法)
alt:function(){
// this.msg='你好'
this.msg=this.mess
}
}
})
</script>
</body>
</html>
QQ截图20180914100735.png
