method one:
<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 is an event event, here is a formal parameter, which can be any value.
- The input event is triggered when the user enters, it is triggered immediately when the value of the element changes;
- In v-on:input="valueChange", valueChange cannot be written as valueChange(event), otherwise event will be displayed as undefined. (event) omitted.
- console.log(event) result
Where target points to the event itself, and value is the input value.
Method Two:
<template>
<div>
<input type="text" :value="message" @:input="message=$event.target.value">{
{message}}
</div>
</template>- $event refers to what event is currently triggered (mouse event, keyboard event, etc.)
- $event.target refers to the target of the event trigger, that is, which element triggers the event, which will directly get the dom element