首页 > 编程笔记 > JavaScript笔记 阅读：48

Vue v-model双向绑定详解（附带实例）

双向绑定是 Vue 中处理用户交互的一种方式，例如文本输入框、多行文本输入区域、单选框与多选框等都可以进行数据的双向绑定。

文本输入框的双向绑定

文本输入框的数据绑定我们之前也使用过，使用 Vue 的 v-model 指令直接设置即可，非常简单，示例如下： 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>表单输入</title>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
  <div id="Application">
    <!-- 文本输入框，双向绑定 textField -->
    <input v-model="textField" />
    <p>文本输入框内容：{{ textField }}</p>
  </div>

  <script>
    const { createApp, ref } = Vue;

    const App = {
      setup() {
        const textField = ref("");
        return { textField };   // 暴露给模板
      }
    };

    createApp(App).mount("#Application");
  </script>
</body>
</html>
运行代码，当输入框中输入的文本发生变化时，我们可以看到段落中的文本也会同步发生变化。

多行文本输入区域的双向绑定

多行文本可以使用 textarea 标签来实现，textarea 可以方便地定义一块区域用来显示和输入多行文本，文本支持换行，并且可以设置最多可以输入多少文本。

textarea 的数据绑定方式与 input 一样，示例代码如下： 
<textarea v-model="textarea"></textarea>
<p style="white-space: pre-line;">多行文本内容:{{textarea}}</p>
在上述代码中，为 p 标签设置 white-space 样式是为了使其可以正常地展示多行文本中的换行效果，运行效果如下图所示：


图 1 输入多行文本

需要注意，textarea 元素只能通过 v-model 指令的方式来进行内容的设置，不能直接在标签内插入文本。例如下面的代码，text 变量的值将不会被显示在 textarea 中，因为它会被绑定的 textarea 变量所覆盖： 
<textarea v-model="textarea">{{text}}</textarea>
需要注意，如果不对 textarea 使用 v-model 进行数据绑定，则标签内的文本可以正常地显示在输入区域中，但是当用户修改了 textarea 中的输入文本后，更新后的文本就无法同步更新到对应变量中。

复选框与单选框的双向绑定

复选框为网页提供多项选择的功能，当将 HTML 中的 input 标签的类型设置为 checkbox 时，就会以复选框的样式进行渲染。

复选框通常成组出现，每个选项的状态只有两种：选中或未选中，如果只有一个复选框，在使用 v-model 指令进行数据绑定时，可以直接将其绑定为布尔值，示例代码如下： 
<input type="checkbox" v-model="checkbox"/>
<p>{{checkbox}}</p>
在上述代码中，checkbox 是定义为布尔类型的属性。运行上述代码，当复选框的选中状态发生变化时，对应的属性 checkbox 的值也会切换。

很多时候复选框是成组出现的，这时我们可以为每一个复选框元素设置一个特殊的值，通过数组属性的绑定来获取每个复选框是否被选中，如果被选中，则数组中会存在它所关联的值，如果没有被选中，则数组中它所关联的值会被删除。示例代码如下： 
<input type="checkbox" value="足球" v-model="checkList"/>足球
<input type="checkbox" value="篮球" v-model="checkList"/>篮球
<input type="checkbox" value="排球" v-model="checkList"/>排球
<p>{{checkList}}</p>
其中，checkList 是定义为数组类型的属性。当某个选项被选中时，会将对应 input 元素的 value 值存入数组中，如果取消了某个选项的选中状态，数组中也会对应将其 value 值移除。

运行代码，效果如下图所示：


图 2 进行复选框数据绑定

单选框的数据绑定逻辑与复选框类似，对每一个单选框元素，我们都可以设置一个特殊的值，并将同为一组的单选框绑定到同一个属性中即可，同一组中的某个单选框被选中时，对应绑定的变量的值也会替换为当前选中的单选框的值。示例代码如下： 
<input type="radio" value="男" v-model="sex"/>男
<input type="radio" value="女" v-model="sex"/>女
<p>{{sex}}</p>
其中，sex 是定义为字符串类型的属性。运行代码，效果如下图所示：


图 3 进行单选框数据绑定

选择列表的双向绑定

选择列表能够给用户提供一组选项进行选择，它支持单选，也支持多选。

HTML 中使用 select 标签来定义选择列表。如果是支持单选的选择列表，可以将其直接绑定到 Vue 组件的一个属性上，如果是支持多选的选择列表，则可以将其绑定到数组属性上。

支持单选的选择列表示例代码如下： 
<select v-model="select">
    <option>男</option>
    <option>女</option>
</select>
<p>{{select}}</p>
其中，select 是定义为字符串类型的属性。

在 select 标签内部，option 标签用来定义一个选项，若要使选择列表支持多选操作，只需要为其添加 multiple 属性即可。示例代码如下： 
<select v-model="selectList" multiple>
    <option>足球</option>
    <option>篮球</option>
    <option>排球</option>
</select>
<p>{{selectList}}</p>
其中，selectList 是定义为数组类型的属性。

之后，在页面中进行选择时，按住 command(control) 键即可进行多选，效果如下图所示：


图 4 进行选择列表数据绑定

在浏览器中要对列表项进行多选，可以在选中一个选项后，按住鼠标左键进行拖动。

3个常用的修饰符

在对表单进行数据绑定时，我们可以使用修饰符来控制绑定指令的一些行为。常用的修饰符有 lazy、number 和 trim。

lazy 修饰符的作用有些类似于属性的懒加载。当我们使用 v-model 指令对文本输入框进行绑定时，每当输入框中的文本发生变化时，都会同步修改对应的属性的值。

在某些业务场景下，我们并不需要实时关注输入框中文案的变化，只需要在用户输入完成后进行数据逻辑的处理即可，这时就可以使用 lazy 修饰符。示例代码如下： 
<input v-model.lazy="textField"/>
<p>文本输入框内容:{{textField}}</p>
运行上述代码，只有当用户输入完成，即输入框失去焦点后，段落中才会同步输入框中最终的文本数据。

number 也是一个常用的修饰符，默认情况下，输入框中输入的文案都会被处理为字符串类型的数据，如果我们需要将其转换为数值类型，则可以使用 number 修饰符，代码如下： 
<input v-model.number="textField"/>
<p>文本输入框内容:{{textField}}</p>

另一个非常强大的修饰符是 trim 修饰符，其作用是将绑定的文本数据的首尾空格去掉，在很多应用场景中，用户输入的文案都是要提交到服务端进行处理的，trim 修饰符处理首尾空格的特性可以为开发者提供很大的方便。示例代码如下： 
<input v-model.trim="textField"/>
<p>文本输入框内容:{{textField}}</p>

相关文章