Vue学习日记之v-model的使用

  我们之前有学习过v-bind指令，这个指令是将html元素的属性绑定到vue实例中，通过这个我们可以实现将data中的属性添加到html元素中显示，例如：

  <div id="app" >
      <input v-bind:value="msg" type="text">
      
  </div>
<script>
  var vm=new Vue({
      el:"#app",
      data:{
          msg:"这是Vue的实例"
      },
      methods:{

      }
  }

运行结果：

  我们在input中添加了一个v-bind绑定了vue实例中的msg，如果我们不使用v-bind会发生什么？？答案是，input中直接显示的是字符串“msg”，而不是msg变量。

  这时我们打开控制台输入，vm.msg="改变！！！"按下回车键以后我们会发现，在input中的信息变成了：改变！！！。我们在input中输入“我也要发生改变！！！”，这时我们在控制台输入vm.ms会发现，vm,msg的结果还是“改变！！！”。我们实现了M到V之间的单向绑定，没有实现V到M的绑定。

  Vue的一大特点就是，能够实现数据的双向绑定，这个绑定是通过，v-model进行的。

• 作用：实现双向数据绑定
• 限制：只能用于表单元素，input、select、textarea、button以及H5中新增的datalist、keygen、output
• 修饰符：.lazy-----用于取代input监听change事件。.number------输入的数字转换成字符串。.trim------过滤掉首尾的空格

  <div id="app" >
      <input type="text" v-model="msg">
      <p>{{msg}}</p>
  </div>
<script>
  var vm=new Vue({
      el:"#app",
      data:{
          msg:"model中的信息"
      },
      methods:{

      }
  })

  运行结果：

这时候我们可以试试将input中的信息增删，会发现，下方的信息也会发生改变。

我们从结果可以发现，我们改变V中的msg也能够改变M中的msg，改变M中的数据绑定同样能改变V中的msg。我们这就实现了双向的数据绑定，data中的msg也被改变了。

在实际的项目中，当我们涉及到数据的添加时，我们可以在data中创建一个变量存放用户添加的信息，使用v-model实现，从表单输入的数据到data中的数据更新，再添加这个信息就好了。

 

1.1  V-model本质

这里要注意的是，v-model实际上是一个语法糖，它的本质上是

<input v-bind:value="msg" @input="msg=&event.target.value">

v-bind:value是实现了数据的单向绑定，当M中的数据改变时，V中的数据也发生改变，@input是对input事件的一个监听，当input内容发生改变时，获取input内容框的值并赋值与msg。

 

1.2 v-model修饰符的使用

  前面说过了v-model有三个修饰符，分别是

• .lazy-----------------取代input监听change事件，实际上就是取消默认的input事件变成失去焦点才触发的change事件。
• .number-----------将输入的字符串变成数字类型
• .trim----------------输入首尾空格过滤

1.2.1 .lazy

  在上面我们直到v-model时一个语法糖，它的本质是

<input v-bind:value="msg" @input="msg=&event.target.value">

也就是说它监听的是input事件，input事件：指的是当input中的内容发生改变时触发。

而.lazy修饰符的作用就是，取消默认的监听input事件，而是监听change事件，change事件：改变input中的内容且失去焦点时触发。

在添加了.lazy修饰符之后，v-model的本质就变成了

<input v-bind:value="msg" @change="msg=&event.target.value">

看下面这个例子

  <div id="app" >
      <input type="text" v-model.lazy="msg">
      <p>{{msg}}</p>
  </div>
<script>
  var vm=new Vue({
      el:"#app",
      data:{
          msg:"model中的信息"
      },
      methods:{

      }
  })

运行结果

改变input中的内容，存在焦点时，msg没有改变

失去焦点时，才发生改变。

1.2.2  .number

  我们都知道在input框中输入的内容是一个字符串类型，那么当我们在某些情况下需要将字符串类型变为数字类型再使用，在Vue中存在了这么一个修饰符能够将input中的字符串类型变成数字类型。

看下面的例子

<div id="app" >
      <input type="text" v-model.number="msg">
      <input type="button" value="检测" @click="btn">
      <p>{{msg1}}</p>
  </div>
<script>
  var vm=new Vue({
      el:"#app",
      data:{
          msg:"model中的信息",

      },
      methods:{
       btn:function () {
        alert("类型是"+typeof this.msg);
        }
      }
  })

运行结果：

当我们输入数字类型时

 

1.2.3  .trim

    关于这个修饰符，具体的功能比较明显，主要的功能是忽略掉输入时的首尾空格。