脚本宝典收集整理的这篇文章主要介绍了vue-事件处理,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
<div id="app">
{{msg}}
<button v-on:click="counter += 1">增加 1</button>
<p>这个按钮被点击了 {{ counter }} 次。</p>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
msg:"事件处理",
counter:0
}
})
</script>
结果如下
<div id="app">
<button v-on:click="greet">greet</button>
<button v-on:click="greet1">greet1</button>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
msg:"事件处理",
counter:0
},
methods:{
greet1:function(event){
alert("你好"+this.msg+"!");//结果:你好事件处理!
if(event){
alert(this.msg);//结果:事件处理
}
}
}
})
</script>
<div id="app">
<button v-on:click="greet2('内联处理器方法')">greet2</button>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
msg:"事件处理",
counter:0
},
methods:{
greet2:function(aaa){
alert(aaa);//结果为:内联处理器方法
}
}
})
</script>
<a v-on:click.stop="doThis"></a>
<form v-on:submit.prevent="onSubmit"></form>
<div v-on:click.capture="doThis">...</div>
<div v-on:click.self="doThat">...</div>
<a v-on:click.once="doThis"></a>
<div id="app">
{{msg}}
<input type="text" v-on:keydown="ke"/>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
msg:"事件处理",
counter:0
},
methods:{
ke:function(e){
if(e.keyCode == 13){
this.msg = e.target.value;
e.target.value = "";
}
}
}
});
结果看下图
Vue.config.keyCodes.f1 = 112
<input @keyup.alt.67="clear">
以上是脚本宝典为你收集整理的vue-事件处理全部内容,希望文章能够帮你解决vue-事件处理所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。