0x8 精读Vue官方文档 - 表单输入绑定精读 Vue 官方文档系列 🎉 双向数据绑定 Vue 通过 v-model

精读 Vue 官方文档系列 🎉

Vue 通过 v-model 指令实现数据双向绑定。 双向数据绑定本质是一个 “语法糖”(Syntactic sugar)，它分别封装了“数据更新”与“事件的绑定和响应处理”。下面是 v-model 在不同元素上的封装：

v-modle 不会在非英文输入法组合文字时更新，如果有特殊的需求，需要自行绑定 input 事件处理。

学习 Vue 通过 v-model 来对 input/input:radio/input:checkbox/textarea/select 等原生 HTML 元素属性值绑定上的增强。

值为字符串类型

由于 input:radio 的 “值” 是字符串类型，当值完全一致时才会被选中，所以利用这一特性，我们可以比 HTML 原始的方式更容易实现一个“单选按钮组”。

<input type="radio" value="a" v-model="checked" />
<input type="radio" value="b" v-model="checked" />

export default{
    name:'radioGroup',
    data(){
        return {
            checked:'a'
        }
    }
}

字符串值/布尔值

复选框的值是一个布尔类型，true 表示选中，false 表示不选中。复选框的初始值可以是一个非布尔类型的值，但是其内部总会将其转换为布尔值。

由于复选框是基于值的为真或为假来切换选中状态，当值满足时全部选中，当值不满足时，全部又是非选中状态，因此无法像单选按钮那样组成一个复选框组。

值为数组

多个复选框，绑定到同一个数组，可以保存每个复选框值的变化（可以通过一个数组值来控制多个多选框的选中状态）。

<input type="checkbox" value="a" v-model="checkeds" />
<input type="checkbox" value="b" v-model="checkeds" />

export default{
    data(){
        return {
            checkeds:['a']
        }
    }
}

值的转换

true-value=“yes”、false-value="no" 可以在特需的场景下将布尔值映射为其它类别的值。

  <input
    type="checkbox"
    value="a"
    v-model="selected"
    true-value="yes"
    false-value="no"
  />

选择框。它的值既可以是字符串类型也可以是对象类型。

对象类型

基于整个对象来匹配选中。

<select v-model="selected">
    <option :value="{num:1}">num-1</option>
    <option :value="{num:2}">num-2</option>
</select>

export default{
    data(){
        return {
            selected:{num:2}
        }
    }
}

多选

使用一个 数组类型 的响应式值结合 multiple 可以实现选择框的多选。

<select multiple v-model="selecteds">
    <option :value="{num:1}">num-1</option>
    <option :value="{num:2}">num-2</option>
</select>

专门为表单控件增加的修饰符。

.lazy : v-model 在每次input事件触发后将输入框的值与数据进行同步，添加 lazy 修饰符，从而转为在 change 事件_之后_进行同步 v-model.lazy="msg"
.trim : 去除首尾空格。
.number : 自动将用户的输入值转为数值类型。