v-model用法深揭秘——解开input默认值绑定疑惑

2022-12-16 15:11:11

v-model 的魅力：双向数据绑定的利器

引言：

在现代 Web 开发中，表单是不可或缺的一部分。它们允许用户输入数据并与应用程序进行交互。Vue.js 中的 v-model 指令通过双向数据绑定，极大地简化了表单开发，使得表单更加响应式和用户友好。

v-model 的基本用法：

v-model 指令的基本用法非常简单，只需在表单元素上添加该指令，并将其与要绑定的数据属性相关联即可。例如，以下代码将 input 元素中的内容绑定到名为 message 的数据属性：

<input v-model="message">

当用户在 input 元素中输入内容时，绑定的数据 message 也随之更新，反之亦然。这使得开发人员能够轻松地创建响应式表单，并让用户能够实时地看到他们输入的内容。

默认值绑定：让 message 与 input 的值保持同步

有时候，我们希望将 message 绑定为 input 的默认值。这可以确保当页面加载时，input 元素中已经包含了默认的内容。为了实现这一点，我们需要在 v-model 指令中添加一个修饰符 .lazy。这个修饰符告诉 Vue.js，只有当用户在 input 元素中输入内容时才更新绑定的数据。

<input v-model.lazy="message">

重新绑定 message：捕捉输入框中的新值

当用户在 input 元素中输入新值时，我们需要将这些新值重新绑定给 message。这可以通过在 v-model 指令中添加另一个修饰符 .trim。这个修饰符会自动去除用户输入的内容中的空格，并确保 message 中只包含有意义的字符。

<input v-model.lazy.trim="message">

示例代码：

为了更好地理解这些概念，让我们来看一个示例代码。在以下代码中，我们创建了一个简单的表单，其中包含一个 input 元素和一个按钮。当用户在 input 元素中输入内容并单击按钮时，绑定的数据 message 将被更新，并在控制台中显示出来。

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/vue@2.6.12/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <input v-model.lazy.trim="message">
    <button @click="showMessage">显示消息</button>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        message: 'Hello, world!'
      },
      methods: {
        showMessage: function() {
          console.log(this.message);
        }
      }
    })
  </script>
</body>
</html>