##v-model指令,可以在input和testarea元素上实现双向绑定.
大家都知道v-model可以实现双向绑定,但是否想过它的本质?
其实本质上的v-model不过是监听用户的input事件来更新数据,以及对一些情况做特殊管理.而数据的来源便是vue实例中的data.
##单行文本
html:
<div id="modelOne">
<input v-model="message" placeholder="编辑">
<p>message 是：{{ message }}</p>
js:
new Vue({
el:"#modelOne",
data:{
message:'';
}
})
即可实现简单的双向绑定
##多行文本 js文件与单行文本相似
html:
<span> 多行文本:</span>
<p style="white-space:pre-line;">{{message}}</p>
<br>
<textarea v-model="message" placeholder="add more line"></textarea>
##checkbox
html:
<div id='example-3'>
<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>
<br>
<span>勾选的名字是：{{ checkedNames }}</span>
</div>
js:
new Vue({
el: '#example-3',
data: {
checkedNames: [] //当存在多个对象时,记得用数组
}
})
#radio js部分和check的相同
html:
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>选中的是：{{ picked }}</span>
#select
多选数组 js部分定义为数组
html部分:
<select v-model="selected" multiple>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<br>
<span>选中的是：{{ selected }}</span>
效果相似:v-for去渲染动态的option可以实现相同的效果
与value属性绑定
对于 radio, checkbox 和 select 的 option 选项，通常可以将 v-model 与值是静态字符串的 value 属性关联在一起
（或者，在 checkbox 中，绑定到布尔值）：
<!-- 当选中时，`picked` 的值是字符串 "a"（译者注：如果没有 value 属性，选中时值是 null） -->
<input type="radio" v-model="picked" value="a">
<!-- `toggle` 的值是 true 或 false -->
<input type="checkbox" v-model="toggle">
<!-- 当选中第一个选项时，`selected` 的值是字符串 "abc"
（译者注：如果没有 value 属性，选中时 selected 值是 option 元素内的文本） -->
<select v-model="selected">
<option value="abc">ABC</option>
</select>
与value属性绑定
###checkbox
<input
type="checkbox"
v-model="toggle"
true-value="yes"
false-value="no"
>
////选中时:
vm.toggle === 'yes'
///没有选中时
vm.toggle === 'no'
修饰符(modifiers)
.lazy
默认情况下，v-model 会在每次 input 事件触发之后，将数据同步至 input 元素中（除了上述提到的输入法组合文字时不会）。可以添加 lazy 修饰符，从而转为在触发 change 事件后同步：
.number
如果想要将用户的输入，自动转换为 Number 类型（译注：如果转换结果为 NaN 则返回字符串类型的输入值），可以在 v-model 之后添加一个 number 修饰符，来处理输入值：
这通常很有用，因为即使是在 type="number" 时，HTML 中 input 元素也总是返回一个字符串类型的值。
.trim
如果想要将用户的输入，自动过滤掉首尾空格，可以在 v-model 之后添加一个 trim 修饰符，来处理输入值：