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等標(biāo)簽上使用且一般配合其他標(biāo)簽一起使用
結(jié)合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
