1.v-on:绑定一个事件 后面放事件名 简写 @事件名=“函数”
例如：
<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'
},
methods:{
alt:function(){
// alert(000)
// console.log(this.msg);
console.log(vm.msg);
}
}
})
</script>
2.添加列表
例如：
<div id='itany'>
<input type="text" v-model='txt'> <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:['吃饭','睡觉','打游戏'],
txt:''
},
methods:{
add:function(){
this.arr.push(this.txt),
this.txt=''
},
delt:function(ind){
this.arr.splice(ind,1)
}
}
})
</script>
QQ图片20180912225110.png
3.点击来回切换
例如：
<body>
<div id='itany'>
<p>{{msg}}</p>
<button v-on:click="chg">按钮</button>
</div>
<script src='js/vue.js'></script>
<script>
new Vue({
el:'#itany',
data:{
msg:'hello word',
// txt:'hello vue',
flag:true
},
methods:{
chg:function(){
// this.msg=this.txt
if(this.flag){
this.msg='hello vue',
this.flag=false
}else{
this.msg='hello word'
this.flag=true
}
}
}
})
</script>
</body>
QQ图片20180912225255.png
网友评论