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

v-model指令用于连接值绑定和更改事件监听器，即将表单输入框的内容同步给JavaScript中相应的变量

//手动连接值绑定
<input
  :value="text"
  @input="event => text = event.target.value">
//v-model优化
<input v-model="text">

v-model支持不同类型的输入，<textarea>、<select> 元素，会根据所使用的元素自动对应DOM属性和事件组合。

文本类型的 <input> 和 <textarea> 元素会绑定 value property 并侦听 input 事件；
<input type="checkbox"> 和 <input type="radio"> 会绑定 checked property 并侦听 change 事件；
<select> 会绑定 value property 并侦听 change 事件。

注意：

v-model 会忽略任何表单元素上初始的 value、checked 或 selected attribute。将始终将当前绑定的 JavaScript 状态视为数据的正确来源。应该在 JavaScript 中使用data 选项来声明该初始值。

基本用法

文本

<p>Message is: {{ message }}</p>
<input v-model="message" placeholder="edit me" />

注意：

对于需要使用 IME 的语言 (中文，日文和韩文等)，会发现 v-model 不会在 IME 输入还在拼字阶段时触发更新。如果的确想在拼字阶段也触发更新，请直接使用自己的 input 事件监听器和 value 绑定而不要使用 v-model。

多行文本

<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<textarea v-model="message" placeholder="add multiple lines"></textarea>

//在<textarea>中是不支持插值表达式的
<!-- 错误 -->
<textarea>{{ text }}</textarea>

<!-- 正确 -->
<textarea v-model="text"></textarea>

复选框

单一的复选框，绑定布尔类型值

<input type="checkbox" id="checkbox" v-model="checked" />
<label for="checkbox">{{ checked }}</label>

多个复选框绑定到同一个数组或集合的值

export default {
  data() {
    return {
      checkedNames: []
    }
  }
}

<div>Checked names: {{ checkedNames }}</div>

<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>Picked: {{ picked }}</div>

<input type="radio" id="one" value="One" v-model="picked" />
<label for="one">One</label>

<input type="radio" id="two" value="Two" v-model="picked" />
<label for="two">Two</label>

选择器

<div>Selected: {{ selected }}</div>

<select v-model="selected">
  <option disabled value="">Please select one</option>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

注意：

如果 v-model 表达式的初始值不匹配任何一个选择项，<select> 元素会渲染成一个“未选择”的状态。在 iOS 上，这将导致用户无法选择第一项，因为 iOS 在这种情况下不会触发一个 change 事件。因此，建议提供一个空值的禁用选项。

<div>Selected: {{ selected }}</div>

<select v-model="selected" multiple>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

//需要安装Ctrl来进行多选，且无论选择顺序如何会自动排序

选择器的选项可以用v-for动态渲染：

export default {
  data() {
    return {
      selected: 'A',
      options: [
        { text: 'One', value: 'A' },
        { text: 'Two', value: 'B' },
        { text: 'Three', value: 'C' }
      ]
    }
  }
}

<select v-model="selected">
  <option v-for="option in options" :value="option.value">
    {{ option.text }}
  </option>
</select>

<div>Selected: {{ selected }}</div>

值绑定

对于单选按钮、复选框和选择器选项，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>

当需要该值绑定到当前组件实例上的动态数据，可以通过v-bind来实现，使用v-bind还可以将选项值绑定为非字符串的数据类型

复选框

<input
  type="checkbox"
  v-model="toggle"
  true-value="yes"
  false-value="no" /> 
//true-value 和 false-value 是 Vue 特有的 attributes，仅支持和 v-model 配套使用。
//这里 toggle 属性的值会在选中时被设为 'yes'，取消选择时设为 'no'
//可以通过v-bind将其绑定为其他动态值：
<input
  type="checkbox"
  v-model="toggle"
  :true-value="dynamicTrueValue"
  :false-value="dynamicFalseValue" />

单选按钮

<input type="radio" v-model="pick" :value="first" />
<input type="radio" v-model="pick" :value="second" /> 
//pick 会在第一个按钮选中时被设为 first，在第二个按钮选中时被设为 second。

选择器选项

<select v-model="selected">
  <!-- 内联对象字面量 -->
  <option :value="{ number: 123 }">123</option>
</select>
//v-model 同样也支持非字符串类型的值绑定
//当某个选项被选中，selected 会被设为该对象字面量值 { number: 123 }

修饰符

//.lazy
<!-- 在 "change" 事件后同步更新而不是 "input" -->
<input v-model.lazy="msg" /> 
//默认情况下，v-model 会在每次 input 事件后更新数据 (IME 拼字阶段的状态例外)。
//可以添加 lazy 修饰符来改为在每次 change 事件后更新数据

//.number
<input v-model.number="age" /> 
//用户输入自动转为数字
//如果该值无法被parseFloat（）处理，将返回原始值
//会在输入框有type="number"时自动启用

//.trim
<input v-model.trim="msg" /> 
//默认自动去除用户输入内容中两端的空格

组件上的v-model

Vue支持构建具有自定义行为的可复用输入组件，并且这些输入组件也支持v-model