1，Vue语法
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(){
console.log(vm.msg);
}
}
})
</script>
样式图
QQ图片20180914104638.png
举例：
<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>
效果图：
1.png
v-model 双向绑定一般用于input button等标签上使用且一般配合其他标签一起使用
结合v-on 与v-model v-for写出添加事件
<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图片20180914104913.png
网友评论