método uno:
<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 es un evento event, aquí hay un parámetro formal, que puede ser cualquier valor.
- El evento de entrada se activa cuando el usuario ingresa, se activa inmediatamente cuando cambia el valor del elemento;
- En v-on:input="valueChange", valueChange no se puede escribir como valueChange(evento), de lo contrario, el evento se mostrará como indefinido. (evento) omitido.
- resultado de console.log (evento)
Donde el objetivo apunta al evento en sí y el valor es el valor de entrada.
Método dos:
<template>
<div>
<input type="text" :value="message" @:input="message=$event.target.value">{
{message}}
</div>
</template>
- $event se refiere a qué evento se activa actualmente (evento del mouse, evento del teclado, etc.)
- $event.target se refiere al objetivo del desencadenante del evento, es decir, qué elemento desencadena el evento, que obtendrá directamente el elemento dom