Vue使用日记（4）：Vue常用指令总结（三）

9、v-model

表单元素在实际开发中很常见，比如用户信息、申请信息等，都需要大量的表单。

Vue中使用v-model实现表单元素和数据的双向绑定。

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

export default {
  data(){
    return {
      message:"i am jimson"
    }
  }
}

解析：

input的v-model绑定了message，实时输入的内容会传递给message，message发生改变；

当message发生改变，因为上面我们使用Mustache语法，将message的值插入到h2中，h2实时发生改变。

所以，通过v-model实现了双向绑定。

上面的input换成textarea元素也是可以的。

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

 

v-model原理说明

v-model其实是一个语法糖，它本质上包含两个操作：

1）v-bind绑定一个value属性；

2）v-on绑定input事件。

所以，下面的代码效果一样：

<input type="text" v-model="message">
等同于
<input type="text" v-bind:value="message" v-on:input="message = $event.target.value">

其他表单元素的v-model运用

radio：

  <div id="app">
    <label for="male">
      <input type="radio" value="male" v-model="gendar" id="male" />男
    </label>
    <label for="female">
      <input type="radio" value="female" v-model="gendar" id="female" />女
    </label>
    <h2>你选择的是：{{gendar}}</h2>
  </div>

  data() {
    return {
      gendar: "male"
    };
  }

checkbox：

  <div id="app">
    <label for="male"><input type="checkbox" value="篮球" v-model="hobbies">篮球</label>
    <label for="male"><input type="checkbox" value="足球" v-model="hobbies">足球</label>
    <label for="male"><input type="checkbox" value="网球" v-model="hobbies">网球</label>
    <h2>你选择的是：{{hobbies}}</h2>
  </div>

  data() {
    return {
      hobbies:[]
    }
  }

其他表单元素一样，不再赘述。

 

到此，Vue中常用命令已列举完毕，接下来的博客将对Vue的其他知识点进行说明。