vue.js - vue有这种用法吗 怎么理解
本文介绍了vue.js - vue有这种用法吗 怎么理解的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
v-on:input 有这种用法吗 怎么理解
解决方案
v-on
是绑定事件,v-on:input
是绑定input
事件,可以简写成@input
语法糖形式以及普通形式
<div id="app">
<p>{{msg}}</p>
<!-- 语法糖形式 -->
<input type="text" v-model="msg">
<!-- 普通形式 -->
<input type="text" :value="msg" @input="inputFun">
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: 'message'
},
methods: {
inputFun: function(e) {
this.msg = e.target.value;
}
}
})
</script>
@input
绑定的事件回调方法是inputFun
(方法名可以随意),输入内容后会触发这个方法,这个方法做的事情就是把元素的输入值获取到赋值给变量msg
,msg
又绑定给value
,如此整个过程就结束了。
这篇关于vue.js - vue有这种用法吗 怎么理解的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文