v-model: 绑定值

by edith_tang

HTML

<div id="app">
  <!-- 单选按钮，使用v-model绑定值 -->
  <!-- 选中时，app.picked === app.value，也就是123 -->
  <input type="radio" v-model="picked" :value="value">
  <label>单选按钮</label>
  <p>
   {{ picked }}
   {{ value }}
  </p>
  <hr>
  <!-- 复选框，使用v-model绑定值 -->
  <!-- 选中时，app.toggle是true-value的值；未选中时，app.toggle是false-value的值 -->
  <input
    type="checkbox"
    v-model="toggle"
    :true-value="value1"
    :false-value="value2">
  <label>复选框</label>
  <p>
    {{ toggle }}
  </p>
  <p>
    {{ value1 }}
  </p>
  <p>
    {{ value2 }}
  </p>
  <hr>
  <!--
  选中时，app.selected是一个Object，所以app.selected.number  === 123;
  -->
  <select v-model="selected">
    <option :value="{ number: 123 }">123</option>
  </select>
  {{ selected }}
  {{ selected.number }}
  <hr>
  <!--
  在输入框中，`v-model`默认是在`input`事件中同步输入框的数据（除了特别说明过的中文输入法比较特殊外），使用修饰符`.lazy`会转变为在 `change` 事件中同步。以下面的代码作为范例，也就是会按下`ENTER`键或输入框失去焦点时，才会同步数据。
  -->
  <input type="text" v-model.lazy="msg">
  <p>
    {{ msg }}
  </p>
  <hr>
  <!--
  使用修饰符`.number`可以将输入转换为`Number`类型。这是考虑到即便是需要输入数字的输入框，输入内容绑定的数据也仍然是String类型，那利用这个修饰符，就能立即转换为Number数据类型。
  -->
  <input type="text" v-model.number="num" placeholder="请输入数字">
  <p>
    {{ num }}
  </p>
  <hr>
  <!--
  使用修饰符`.trim`可以去除输入内容的首尾空格。
  -->
  <input type="text" placeholder="请输入文字" v-model="trimMsg">
  <p>
    {{ trimMsg }}
  </p>
</div>

JavaScript

var app = new Vue({
	el: '#app',
  data: {
  	picked: false,
    value: 123,
    // toggle在书中的例子中默认是个布尔值，但是如果是布尔值，一开始就会显示是false了，我不知道是不是有别的说法，还是就是可以让它的初始值就是未选中状态时的值
    toggle: 'no',
    value1: 'yes',
    value2: 'no',
    selected: '',
    msg: '',
    num: '',
    trimMsg: ''
  }
})