v-model的基本使用与原理

 

 

1.v-model的基本使用

双向绑定

 改变message值，输入框内文字随之改变

当删除输入框内文本时，输入框后文字也随之改变 

<div id="app">
  <input type="text" v-model="message">
  {{message}}
</div>

2. v-model的原理

 

<div id="app">
<!--  <input type="text" v-model="message">-->
  <input type="text" v-bind:value="message">
  {{message}}
</div>

但是！改变文本框内内容时，后面的文本不随之改变，因为此时message没有改变

 为了实现双向绑定，我们使用v-on的input事件，每次input都调用valueChange函数

valueChange函数参数是input事件发生时，浏览器自动生成的event

  <input type="text" v-bind:value="message" v-on:input="valueChange">
//此处可写为@input=

    methods:{
      // 一旦在浏览器产生事件，浏览器自动生成event对象
      // 如果此处我们有event，使用此方法时省略参数，event会自动传入
      valueChange(event)
      {
        // console.log("123")
        //每次键盘有输入，就把message改为aaaaa
        // this.message="aaaaa"
        this.message=event.target.value
      }
    }

至此，已通过v-bind与v-on实现双向绑定

上述内容的更简便写法，不使用函数，直接在v-on中书写具体操作

  <input type="text" :value="message" @input="message=$event.target.value">