Vue学习笔记之表单输入绑定

表单输入绑定      v-model

值绑定

1 对于单选按钮，复选框及选择框的选项，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 实现，并且这个属性的值可以不是字符串。

2 单选按钮

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

// 当选中时

vm.pick === vm.a

3 选择框的选项

<select v-model="selected">

    <!-- 内联对象字面量 -->

  <option v-bind:value="{ number: 123 }">123</option>

</select>

// 当选中时

typeof vm.selected // => 'object'

vm.selected.number // => 123

4 修饰符

.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">

5 也可以在输入组件上使用v-model

当用在组件上时，v-model 则会这样：

<custom-input

  v-bind:value="searchText"

  v-on:input="searchText = $event"

></custom-input>

为了让它正常工作，这个组件内的 <input> 必须：

• 将其 value attribute 绑定到一个名叫 value 的 prop 上
• 在其 input 事件被触发时，将新的值通过自定义的 input 事件抛出

写成代码之后是这样的：

Vue.component('custom-input', {

  props: ['value'],

  template: `

    <input

      v-bind:value="value"

      v-on:input="$emit('input', $event.target.value)"

    >

  `

})

现在 v-model 就应该可以在这个组件上完美地工作起来了：

<custom-input v-model="searchText"></custom-input>

参考官网   https://cn.vuejs.org/v2/guide/list.html  总结笔记