Implementación del modelo v

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

Supongo que te gusta

Origin blog.csdn.net/weixin_46769087/article/details/127918596
Recomendado
Clasificación