方法一:
<template>
<div>
<input type="text" v-bind:value="message" v-on:input="valueChange">{
{message}}
</div>
</template>
<script>
export default {
data(){
return{
message:""
}
},
methods: {
valueChange(event){
console.log(event)//结果见注解
this.message=event.target.value
}
},
- event 为event事件,这里为形参,可以为任意值。
- input 事件在用户输入时触发,它是在元素值发生变化时立即触发;
- v-on:input="valueChange"中valueChange不能写为valueChange(event),否则显示event未定义。(event)省略。
- console.log(event)结果
其中target指向事件本身,value为输入的值。
方法二:
<template>
<div>
<input type="text" :value="message" @:input="message=$event.target.value">{
{message}}
</div>
</template>
- $event是指当前触发的是什么事件(鼠标事件,键盘事件等)
- $event.target则指的是事件触发的目标,即哪一个元素触发了事件,这将直接获取该dom元素