vue模板语法整理（三）

表单绑定v-model

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

• 基本使用方式

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

当我们在输入框输入内容时
1).因为input中的v-model绑定了message，所以会实时将输入的内容传递给message，message发生改变。
2).当message发生改变时，因为上面我们使用Mustache语法，将message的值插入到DOM中，所以DOM会发生响应的改变。
3).所以，通过v-model实现了双向的绑定。

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">

或

<input type="text" :value="message" @input="valueChange">//监听用户输入

methods: {
   
      valueChange(event) {
   //一旦在界面产生一个事件，浏览器会产生一个even对象
        this.message = event.target.value;//实现实时改变
      }
    }

v-model：radio

<div id="app">
  <label for="male">
    <input type="radio" id="male" value="男" v-model="sex">男
  </label>
  <label for="female">
    <input type="radio" id=