拼搏30天VUE.js之 v-model（Part12）

v-model方法

你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。

v-model 在内部使用不同的属性为不同的输入元素并抛出不同的事件：

text 和 textarea 元素使用 value 属性和 input 事件；
checkbox 和 radio 使用 checked 属性和 change 事件；
select 字段将 value 作为 prop 并将 change 作为事件。

对于需要使用输入法 (如中文、日文、韩文等) 的语言，你会发现 v-model 不会在输入法组合文字过程中得到更新。如果你也想处理这个过程，请使用 input 事件。

栗子一：

<!-- Template --> 
<div id="app"> 
<div> 
<input type="text" v-model="message" placeholder="Hello W3cplus!(^_^)" /> 
</div> 
<h1>{{ message }}</h1> 
</div>

結果為：

拼搏30天VUE.js之 v-model（Part12）

从效果中可以看出，修改input的value值，对应的h1元素的内容也修改了。这种效果就是数据双向绑定的效果。

而这里关键点就是使用了v-model指令。在Vue中，可以使用v-model指令在表单控件元素上创建双向数据绑定。它会根据控制类型自动选取正确的方法来更新元素。尽管有些神奇，但v-model本质上不过是语法糖，它负责监听用户的输入事件以更新数据，并特别处理一些极端的例子。

单行文本输入框

前面演示的示例其实就是单行文本输入框的效果。input上通过v-model绑定Vue的数据源的值。当input输入值一旦发生变更时，数据也会相应发生变化，从而元素渲染的插值也会做出相应变化。

这里的data可以是object或者function，但组件的data只能是function，这是因为组件内各自拥有自己的data，而非共用的关系。不过今天我们不看组件中的数据双向绑定，只是简单的看表单控件方面的。不跑题了，回到input框中来。我们一般在模板中像下面这样写代码：

<!-- Template -->
<div id="app">
    <div>
        <input type="text" v-model="message" placeholder="Hello W3cplus!(^_^)" />
    </div>
    <h1>{{ message }}</h1>
</div>

同样的，在Vue实例中，需要指定data，我们这个示例是指message：

let app = new Vue({
    el: '#app',
    data: {
        message: 'Hello W3cplus! (^_^)'
    }
})

刷新你的浏览器，当你修改input的输入值时，对应的可以看到h1元素内容的同步变化，效果如下图所示：

拼搏30天VUE.js之 v-model（Part12）

多行文本域

多行文本域textarea和input非常的类似。比如把上面示例中的input换面textarea表单元素，同样的将v-model="message"绑定在textarea元素上。模板代码像下面这样：

<!-- Template -->
<div id="app">
    <div>
        <textarea v-model="message" cols="30" rows="5"></textarea>
    </div>
    <h2>{{ message }}</h2>
</div>

咱们在textarea中修改内容，对应的h2也会有变化：

拼搏30天VUE.js之 v-model（Part12）

小结一下：当使用文本input(包括email，number等)或textarea时，v-model="varName"等价于:value="varName" @input="e => varName = e.target.value"。这意味着每次输入完成后的varName将被更新为输入的值，然后输入的值被设置为varName。正常的select元素也会像这样，尽管multiple多项选择有所不同。

在文本区域插值 (<textarea></textarea>) 并不会生效，应用 v-model 来代替。

複選框：

栗子一：

<div id="app">
 <input type="checkbox" v-model="checked" id="checkbox" /> <label for="checkbox">{{checked}}</label>
</div>
<script>
new Vue({
  el: '#app',
  data: {
    checked: false
  }
})
</script>

刷新浏览器，当复选框选中的时候，checked的值false就变成了true。如下图所示：

拼搏30天VUE.js之 v-model（Part12）

栗子二：

<div id="app">
 <input type="checkbox" v-model="checked" id="checkbox" /> <label for="checkbox">{{checked}}</label>
</div>
<script>
new Vue({
  el: '#app',
  data: {
    checked: '選中我'
  }
})
</script>

拼搏30天VUE.js之 v-model（Part12）

點擊之後在false和true中切換

上面的示例，咱们只使用单个复选框，从效果上告诉我们v-model会将其视为布尔值，并且会忽略该value。而且：

<input type="checkbox" value="foo" v-model="isChecked" />

将和下面的代码相同：

<input type="checkbox" value="foo" :checked="!!isChecked" @change="e => isChecked = e.target.checked" />

如果想要它是非布尔值，可以使用true-value和false-value属性，它控制当选择复选框时，模型将被设置成什么值。

<input type="checkbox" value="foo" v-model="isChecked" true-value="1" false-value="0">

与以下代码相同

<input type="checkbox" value="foo" :checked="isChecked =='1'" @change="e => isChecked = e.target.checked？'1':'0'">

单一复选框的情况差不多就是这样。如果有多个复选框共享一个数据源（v-model指定的值），那么这些复选框将填充一个数组，其值为所有勾选的复选框，但一定要在数据源中指定数据是一个数组类型，否则会产生一些奇怪的现象。

多选项的示例：

<div id="app">
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames"> 
	<label for="jack">Jack</label> 
	<input type="checkbox" id="john" value="John" v-model="checkedNames"> 
	<label for="john">John</label> 
	<input type="checkbox" id="mike" value="Mike" v-model="checkedNames"> 
	<label for="mike">Mike</label>
	<div>选中的值：{{checkedNames}}</div>
</div>
<script>
new Vue({
  el: '#app',
  data: {
      checkedNames: []
  }
})
</script>

效果如下：

拼搏30天VUE.js之 v-model（Part12）

当我们使用多个复选框时，true-value和false-value属性不再有效。

單選栗子：

<div id="app">
<input type="radio" v-model="selected" value="CSS" id="css"/> 
	<label for="css">CSS</label> 
	<input type="radio" v-model="selected" value="HTML" id="html"/> 
	<label for="html">HTML</label> 
	<input type="radio" v-model="selected" value="JavaScript" id="javascript"/> 
	<label for="javascript">JavaScript</label> 
	<br> 
	<div>你最喜欢的是：{{selected}}</div>
</div>
<script>
new Vue({
  el: '#app',
  data: {
       selected: null
  }
})
</script>

結果：

拼搏30天VUE.js之 v-model（Part12）

select選擇框：

<div id="app">
	<h1>选择框</h1> 
	<div> 
		<select v-model="selected"> 
			<option disabled value="">请选择</option> 
			<option>CSS</option> <option>HTML</option> 
			<option>JavaScript</option> </select> 
		<span>请选择: {{ selected }}</span> 
	</div> 
	<div> 
		<select v-model="multipleSelected" multiple> 
			<option>CSS</option> 
			<option>HTML</option> 
			<option>JavaScript</option> 
			<option>PHP</option> 
		</select> 
		<span>请选择:{{multipleSelected}}</span> 
	</div>
</div>
<script>
new Vue({
  el: '#app',
  data: {
      selected: null, 
	  multipleSelected: []
  }
})
</script>

效果：

拼搏30天VUE.js之 v-model（Part12）

如果 v-model 表达初始的值不匹配任何的选项，<select> 元素就会以”未选中”的状态渲染。在 iOS 中，这会使用户无法选择第一个选项，因为这样的情况下，iOS 不会引发 change 事件。因此，像以上提供 disabled 选项是建议的做法。

用 v-for 渲染的动态选项：

<div id="app">
	<select v-model="selected">
  <option v-for="option in options" v-bind:value="option.value">
    {{ option.text }}
  </option>
</select>
<span>Selected: {{ selected }}</span>
</div>
<script>
new Vue({
  el: '#app',
  data: {
    selected: 'A',
    options: [
      { text: 'One', value: 'A' },
      { text: 'Two', value: 'B' },
      { text: 'Three', value: 'C' }
    ]
  }
})
</script>

結果爲：

拼搏30天VUE.js之 v-model（Part12）

點擊那個就出現那個的值。

值绑定

对于单选按钮，复选框及选择框的选项，v-model 绑定的值通常是静态字符串 (对于复选框也可以是布尔值)：

<!-- 当选中时，`picked` 为字符串 "a" -->
<input type="radio" v-model="picked" value="a">

<!-- `toggle` 为 true 或 false -->
<input type="checkbox" v-model="toggle">

<!-- 当选中第一个选项时，`selected` 为字符串 "abc" -->
<select v-model="selected">
  <option value="abc">ABC</option>
</select>

但是有时我们可能想把值绑定到 Vue 实例的一个动态属性上，这时可以用 v-bind 实现，并且这个属性的值可以不是字符串。

复选框

<input
  type="checkbox"
  v-model="toggle"
  true-value="yes"
  false-value="no"
>

// 当选中时
vm.toggle === 'yes'
// 当没有选中时
vm.toggle === 'no'

这里的 true-value 和 false-value 特性并不会影响输入控件的 value 特性，因为浏览器在提交表单时并不会包含未被选中的复选框。如果要确保表单中这两个值中的一个能够被提交，(比如“yes”或“no”)，请换用单选按钮。

单选按钮

<input type="radio" v-model="pick" v-bind:value="a">

// 当选中时
vm.pick === vm.a

选择框的选项

<select v-model="selected">
    <!-- 内联对象字面量 -->
  <option v-bind:value="{ number: 123 }">123</option>
</select>

// 当选中时
typeof vm.selected // => 'object'
vm.selected.number // => 123

修饰符

`.lazy`

在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转变为使用 change事件进行同步：

<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" >

`.number`

如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：

<input v-model.number="age" type="number">

这通常很有用，因为即使在 type="number" 时，HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat() 解析，则会返回原始的值。

`.trim`

如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：

<input v-model.trim="msg">

例子：

<div id="app">
<ul> 
	<li> 
		<label>不带任何修饰符：
		</label> 
		<input type="text" v-model="message" placeholder="Hello W3cplus!(^_^)" /> 
		<span>{{message}}</span> 
	</li> 
	<li> 
		<label>带.lazy修饰符：</label> 
		<input type="text" v-model.lazy="message" placeholder="Hello W3cplus!(^_^)" /> 
		<span>{{message}}</span> 
	</li> 
	<li> 
		<label>带.number修饰符：</label> 
		<input type="text" v-model.number="message" placeholder="Hello W3cplus!(^_^)" />
		<span>{{message}}</span>
	</li> 
	<li> 
		<label>带.trim修饰符：</label> 
		<input type="text" v-model.trim="message" placeholder="Hello W3cplus!(^_^)" /> 
		<span>{{message}}</span> 
	</li> 
	</ul>
</div>
<script>
new Vue({
  el: '#app',
  data: {
   message: 'Hello W3cplus!(^_^)',
  }
})
</script>

結果爲：

拼搏30天VUE.js之 v-model（Part12）

从上在的效果可以看出：

不带修饰符：修改input的值，message立马变同步input的输入值
带.lazy修饰符：修改input的值，message并不会立马同步input的输入值，只有当input失去焦点时，message才会同步input的输入值
带.number修饰符：当输入框的值，以数字加其他字符组合的内容，会自动去除其他的字符，只留数字；如果是其他字符加数字组合的内容，并不会删除其他字符，只留数字。一般带.number修饰符的input控制配合type="number"配合使用
带.trim修饰符： input输入框开始或末尾有空字符，将会自动删除空字符，如果空字符在其他字符中间，则不会删除空字符

拼搏30天VUE.js之 v-model（Part12）

多行文本域

相关推荐