1.v-on:綁定一個(gè)事件 后面放事件名 簡(jiǎn)寫(xiě) @事件名=“函數(shù)”
例如：
<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:['吃飯','睡覺(jué)','打游戲'],
txt:''
},
methods:{
add:function(){
this.arr.push(this.txt),
this.txt=''
},
delt:function(ind){
this.arr.splice(ind,1)
}
}
})
</script>
QQ圖片20180912225110.png
3.點(diǎn)擊來(lái)回切換
例如：
<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
