绑定事件='函数名'，简写：‘@click’
1.弹出
html部分
<div id='itany'>
<button v-on:click='alt'>按钮</button>
</div>
js部分
<script>
new Vue({
el: '#itany',
data: {
msg: 'hello'
},
methods: {
alt: function() {
console.log("000");
}
}
})
</script>
2.点击切换
html部分
<div id='itany'>
<p>{{msg}}</p>
<button v-on:click="chg">按钮</button>
</div>
js部分
<script>
new Vue({
el: '#itany',
data: {
msg: 'hello word',
txt: 'hello vue'
},
methods: {
chg: function() {
this.msg = this.txt
}
}
})
</script>
3.点击来回切换
html部分
<div id='itany'>
<p>{{msg}}</p>
<button v-on:click="chg">按钮</button>
</div>
js部分
<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>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
