v-model 和表单

v-model

指令用于表单类元素双向绑定数据

<div id="app"> 

input 和 textarea 用法：

<input type="text" v-model="value">
下面实时显示 value 的值
input 输入什么右边就显示什么 ---> {{value}}

<textarea cols="30" rows="10" v-model="msg">这里的初始化值不会显示出来</textarea>
-------------------------------------
单选框用法：组合使用多个单选框需要用 v-model 来配合 value 使用，绑定选中的单选框的 value 值，data 中的初始数据可以随意给。

单个单选框：<input type="radio" name="" v-bind:checked="oneradio">
单个单选框用 v-model 不生效

多个单选框：
Jack: <input type="radio" name="name" value="Jack" v-model="checkName">
John: <input type="radio" name="name" value="John" v-model="checkName">
Frank: <input type="radio" name="name" value="Frank" v-model="checkName">
现在选中的是：{{checkName}}
-------------------------------------
复选框用法：组合使用多个复选框需要用 v-model 来配合 value 使用，v-model 绑定一个数组。
如果绑定的是一个字符串，会转换为 true or false，所有复选框都(同步)对应这个字符串的值。

单个复选框: 使用 v-bind 和 v-model 都可以
<input type="checkBox" :checked="oneradio">
<input type="checkBox" v-model="oneradio">

多个复选框：
Jack: <input type="checkbox" value="Jack" v-model="checkArr">
John: <input type="checkbox"  value="John" v-model="checkArr">
Frank: <input type="checkbox" value="Frank" v-model="checkArr">
现在选中了：{{checkArr}}
-------------------------------------
下拉框：v-model 初始既可以绑定数组也可以绑定字符串，选择之后都会被自动转化为字符串(单选下拉框)或者数组(多选下拉框)。

单选下拉框：
<select v-model="selected">
  <option value="Jack">Jack</option>
  <option value="John">John</option>
  <option value="Frank">Frank</option>
</select>

多选下拉框：
<select v-model="selected"  multiple>
  <option value="Jack">Jack</option>
  <option value="John">John</option>
  <option value="Frank">Frank</option>
</select>

</div>

var app = new Vue({
  el: '#app',
  data: {
	value: '',
	msg: '',
	oneradio: false,
	checkName: ''，
	selected: [],  // or ''
  }
})

总的来说，单选的初始化最好给定字符串，v-model 此时绑定的是字符串或者布尔值；多选的初始化最好给定一个数组。

需要注意的是：表单控件只关心(依赖于) v-model 绑定的数据的值，而不会显示控件中初始化写入的值。

绑定值

• 单选

<input v-model="picked" :value="value">
此时的 picked 值：{{picked}}

data: {
  picked: true,
  value: '绑定的 value'
}

页面刚开始加载完成 {{picked}} 显示的是 data 中的初始值，而此时单选是没有被选中的，如果选中单选框，picked 动态加载为 v-bind 绑定的 value 值。

也就是说，单选框的 v-model 动态绑定的是 v-bind 绑定的 value 值。

• 多选

<input type="checkbox" v-model="checked" :true-value="valueT" :false-value="valueF">

在这里显示 checked 的值：{{checked}}
被选中：{{checked == valueT}}  // true or false
没选中：{{checked == valueF}}  // true // false

data: {
  checked: true,
  valueT: '我被选中了',
  valueF: '我没有被选中'
}

绑定的值选中和未选中不一样

• 下拉框

<select v-model="selected">
  <option :value="{name: Jack}">Jack</option>

  此时 selected 的类型为：{{typeof selected}}
  此时 selected 的值为：{{selected}}
</select>

在没有选择之前，v-model 绑定的为 data 中初始化的 selected 值，而选中了之后绑定的是 option 中的 value 值。

在 select 标签上绑定 value 值对 option 没有影响。

修饰符

• lazy
  v-model 默认同步 input 的输入框的数据，而 lazy 修饰符可以使其在失去焦点或者敲回车键之后在更新数据。

<input type="text" v-model.lazy="lazyStr">

• number
  将 input 输入的字符串转化为 number 类型，“123” --> 123。

<input type="text" v-model.number="isNum">
{{typeof isNum}}

• trim
  自动过滤输入过程中收尾输入的空格。

<input type="text" v-model.trim="str">