Vue——表单输入绑定

     

目录

基本用法​

文本

多行文本

复选框​

选择器​

值绑定​

复选框

单选按钮 

选择器选项

修饰符​

.lazy​

.number​

.trim​

组件上的 v-model​

---

       在前端处理表单时，我们常常需要将表单输入框的内容同步给 JavaScript 中相应的变量。手动连接值绑定和更改事件监听器可能会很麻烦：

v-model 指令帮我们简化了这一步骤：

另外，v-model 还可以用于各种不同类型的输入，</code>、<code><select></code> 元素。它会根据所使用的元素自动使用对应的 DOM 属性和事件组合：</p> <ul> <li>文本类型的 <code><input></code> 和 <code><textarea></code> 元素会绑定 <code>value</code> property 并侦听 <code>input</code> 事件；</li> <li><code><input type="checkbox"></code> 和 <code><input type="radio"></code> 会绑定 <code>checked</code> property 并侦听 <code>change</code> 事件；</li> <li><code><select></code> 会绑定 <code>value</code> property 并侦听 <code>change</code> 事件。</li> </ul> <blockquote> <p><span style="color:#fe2c24;"><strong>注意</strong></span></p> <p><code>v-model</code> 会忽略任何表单元素上初始的 <code>value</code>、<code>checked</code> 或 <code>selected</code> attribute。它将始终将当前绑定的 JavaScript 状态视为数据的正确来源。你应该在 JavaScript 中使用<code>data</code> 选项来声明该初始值</p> </blockquote> <h3 id="basic-usage">基本用法​</h3> <h4 id="text">文本</h4> <pre><code class="language-javascript"><p>Message is: {{ message }}</p> <input v-model="message" placeholder="edit me" /> </code></pre> <p> <a href="http://img.e-com-net.com/image/info8/d02bfed4715d41f3b35626b16b82cc5a.jpg" target="_blank"><img alt="Vue——表单输入绑定_第1张图片" height="107" src="http://img.e-com-net.com/image/info8/d02bfed4715d41f3b35626b16b82cc5a.jpg" width="650" style="border:1px solid black;"></a></p> <blockquote> <p><span style="color:#fe2c24;"><strong>注意</strong></span></p> <p>对于需要使用 IME 的语言 (中文，日文和韩文等)，你会发现 <code>v-model</code> 不会在 IME 输入还在拼字阶段时触发更新。如果你的确想在拼字阶段也触发更新，请直接使用自己的 <code>input</code> 事件监听器和 <code>value</code> 绑定而不要使用 <code>v-model</code>。</p> </blockquote> <h4 id="multiline-text">多行文本</h4> <pre><code class="language-javascript"><span>Multiline message is:</span> <p style="white-space: pre-line;">{{ message }}</p> <textarea v-model="message" placeholder="add multiple lines">

注意在 </code> 中是不支持插值表达式的。请使用 <code>v-model</code> 来替代：</p> <pre><code class="language-javascript"><!-- 错误 --> <textarea>{{ text }}

复选框​

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

{{ checked }}

我们也可以将多个复选框绑定到同一个数组或集合的值：

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

Checked names: {{ checkedNames }}


Jack


John


Mike

在这个例子中，checkedNames 数组将始终包含所有当前被选中的框的值。

单选按钮

Picked: {{ picked }}


One


Two

 

选择器​

单个选择器的示例如下：

Selected: {{ selected }}


  Please select one
  A
  B
  C

 

注意

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

多选 (值绑定到一个数组)：

Selected: {{ selected }}

A B C

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

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

  
    {{ option.text }}
  


Selected: {{ selected }}

值绑定​

对于单选按钮，复选框和选择器选项，v-model 绑定的值通常是静态的字符串 (或者对复选框是布尔值)：

  ABC

 但有时我们可能希望将该值绑定到当前组件实例上的动态数据。这可以通过使用 v-bind 来实现。此外，使用 v-bind 还使我们可以将选项值绑定为非字符串的数据类型。

复选框

true-value 和 false-value 是 Vue 特有的 attributes，仅支持和 v-model 配套使用。这里 toggle 属性的值会在选中时被设为 'yes'，取消选择时设为 'no'。你同样可以通过 v-bind 将其绑定为其他动态值：

提示

true-value 和 false-value attributes 不会影响 value attribute，因为浏览器在表单提交时，并不会包含未选择的复选框。为了保证这两个值 (例如：“yes”和“no”) 的其中之一被表单提交，请使用单选按钮作为替代。

单选按钮 

pick 会在第一个按钮选中时被设为 first，在第二个按钮选中时被设为 second。

选择器选项

  
  123

v-model 同样也支持非字符串类型的值绑定！在上面这个例子中，当某个选项被选中，selected 会被设为该对象字面量值 { number: 123 }。

修饰符​

.lazy​

默认情况下，v-model 会在每次 input 事件后更新数据 (IME 拼字阶段的状态例外)。你可以添加 lazy 修饰符来改为在每次 change 事件后更新数据：

.number​

如果你想让用户输入自动转换为数字，你可以在 v-model 后添加 .number 修饰符来管理输入：

如果该值无法被 parseFloat() 处理，那么将返回原始值。

number 修饰符会在输入框有 type="number" 时自动启用。

.trim​

如果你想要默认自动去除用户输入内容中两端的空格，你可以在 v-model 后添加 .trim 修饰符：

组件上的 v-model​

如果你还不熟悉 Vue 的组件，那么现在可以跳过这个部分。

HTML 的内置表单输入类型并不总能满足所有需求。幸运的是，我们可以使用 Vue 构建具有自定义行为的可复用输入组件，并且这些输入组件也支持 v-model！