v-model实现双向绑定

##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 修饰符，来处理输入值：