VUE v-model表单数据双向绑定完整示例

下面我来详细讲解“Vue v-model表单数据双向绑定完整示例”的完整攻略。

1. 简介

v-model是Vue中非常重要的一个指令，它可以实现表单数据的双向绑定。在Vue中，数据驱动视图，当我们的数据发生变化时，视图也会随之变化，而v-model就是连接数据和视图的重要途径之一。

2. 示例说明

下面我们来看两个关于v-model的示例：

2.1 示例1：文本框的双向绑定

首先，我们需要用Vue创建一个实例，然后在实例中定义一个data数据对象，用于存储我们表单数据的初始值：

<!DOCTYPE html>
<html>
  <head>
    <title>Vue v-model示例</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <input type="text" v-model="message" />
      <p>当前输入的内容是：{{ message }}</p>
    </div>

    <script>
      var app = new Vue({
        el: "#app",
        data: {
          message: "Hello Vue!"
        }
      });
    </script>
  </body>
</html>

在这个示例中，我们在页面上创建了一个文本框，并且用v-model指令将这个文本框和Vue实例中的message属性进行了双向绑定。这就意味着，无论是在页面上修改这个文本框的值，还是在Vue实例中修改message的值，双方都会随之同步。

2.2 示例2：复选框的双向绑定

除了文本框，我们还可以使用v-model实现复选框的双向绑定。接下来我们就来看一下这个示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Vue v-model示例</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <input type="checkbox" id="checkbox1" v-model="checkedNames" value="Jack" />
      <label for="checkbox1">Jack</label>

      <input type="checkbox" id="checkbox2" v-model="checkedNames" value="Mary" />
      <label for="checkbox2">Mary</label>

      <input type="checkbox" id="checkbox3" v-model="checkedNames" value="Tom" />
      <label for="checkbox3">Tom</label>

      <p>选择的人员有：{{ checkedNames }}</p>
    </div>

    <script>
      var app = new Vue({
        el: "#app",
        data: {
          checkedNames: []
        }
      });
    </script>
  </body>
</html>

在这个示例中，我们创建了三个复选框，并且用v-model将它们和Vue实例中的checkedNames属性进行了双向绑定。由于这个属性是一个数组，在页面上选择复选框，或者在Vue实例中手动修改这个属性，都会同步到另一方。