下面是两种获取input输入值的方法:
使用v-model指令
<div id="app">
<input type="text" v-model="message">
<h2>{{message}}</h2>
</div>
<script src="vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:'hello'
}
})
</script>
input中使用v-model,用它绑定了message,实时将输入的内容传递给data里的message,
然后data里的message传到{{message}}
v-bind绑定一个value属性,v-on指令给当前元素绑定input事件(当输入input的时候同时会发生)
//v-bind精简成: v-on:精简成@
// :value="message" @valueChange
<div id="app">
<input type="text" v-bind:value="message" v-on:input="valueChange">
<h2>{{message}}</h2>
</div>
<script src="vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:'hello'
},
methods:{
//在界面上产生一个事件后,浏览器生成一个事件对象
// (包含正在改变的事件信息)
valueChange(event){
//此时发生的目标事件的值赋给data:message
//动态绑定时刻改变的data:message,在input里用:value="message"
this.message=event.target.value
}
}
})
</script>
第三种:@input 用于监听事件 只要输入的值变化了就会触发input
<div>
<input type="text" :value="message" @input="message=$event.target.value">
<h2>{{message}}</h2>
</div>
<script src="vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:'hello'
},
</script>