2路绑定 Vue - Html

在 Vue 中，双向数据绑定是一种非常常见的数据绑定方式。它通过将数据和表单元素进行绑定来使两者互相影响，从而使表单元素的值同步反映出数据的变化，反之亦然。在 Vue 中，双向数据绑定有两种实现方式：v-model 和 .sync。

v-model

v-model 是 Vue 中最常用的一种双向绑定方式，它可以很方便地实现表单元素与数据的绑定。v-model 的语法很简单，只需要将表单元素的 value 或 checked 属性和一个变量绑定起来即可，如下所示：

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

<script>
  export default {
    data() {
      return {
        message: ""
      };
    }
  };
</script>

说明：

• 通过 v-model 绑定 input 元素的值和 data() 中的 message 变量；
• 在模板中使用 {{ message }} 显示 message 变量的值。

此时，当我们在 input 元素中输入值，并失去焦点时，页面上会自动显示出我们输入的值。

.sync

除了 v-model 外，Vue 还提供了另一种双向数据绑定方式：.sync。.sync 可以用于子组件和父组件之间的数据传递，非常方便。.sync 的语法和 v-model 很相似，只需要在父组件中使用 .sync 修饰符来绑定子组件的一个 prop 属性和一个响应的事件即可，如下所示：

<!--父组件-->
<template>
  <div>
    <child :message.sync="message"></child>
    <p>{{ message }}</p>
  </div>
</template>

<script>
  import Child from "./child.vue";

  export default {
    components: {
      Child
    },
    data() {
      return {
        message: ""
      };
    }
  };
</script>

<!--子组件-->
<template>
  <div>
    <input :value="message" @input="$emit('update:message', $event.target.value)" />
  </div>
</template>

<script>
  export default {
    props: ["message"],
    data() {
      return {};
    }
  };
</script>

说明：

• 父组件中通过 :message.sync 绑定子组件的 message prop 和 update:message 事件；
• 子组件中使用 :value 绑定 input 元素的值和 message prop，使用 $emit 发射 update:message 事件，传递 input 元素的值。

此时，当我们在子组件的 input 元素中输入值，并失去焦点时，页面上会自动显示出我们输入的值，并且该值也会同步更新到父组件的 message 变量中。

总结

通过 v-model 和 .sync 双向数据绑定，我们可以很方便地实现表单元素和数据的同步更新。在实际的项目中，需要根据实际情况选择适合的方式进行双向数据绑定，以提高代码的可维护性和可读性。

以上是 2 路绑定 Vue - Html 的介绍，希望对你有所帮助。