vue.js v-model详解

v-model 是 Vue.js 中的一个指令，用于实现双向数据绑定。

使用 v-model 可以将表单元素的值与 Vue 实例中的数据进行绑定，当表单元素的值发生变化时，Vue 实例中的数据也会相应地更新，反之亦然。

以下是 v-model 的详细解析和代码示例：

语法：

<input v-model="message">

绑定数据：

new Vue({
  data: {
    message: ''
  }
});

结果：

表单元素的值与 message 数据进行双向绑定。当输入框的值发生变化时，message 数据也会相应地更新。

完整示例：

<div id="app">
  <input v-model="message">
  <p>{{ message }}</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: ''
  }
});
</script>

在上面的示例中，我们创建了一个 Vue 实例，并将其绑定到 id 为 app 的元素上。在该实例中，我们定义了一个 message 属性，并将其初始值设为空字符串。

在 HTML 中，我们使用 v-model 指令将输入框与 message 进行绑定。当用户在输入框中输入文本时，message 的值会实时更新，而在 <p> 标签中的插值表达式 {{ message }} 会动态地显示 message 的值。

通过上述示例，我们可以看到 v-model 的使用非常简单，能够快速实现双向数据绑定，减少了手动监听和更新数据的工作量。