如何在Vue组件中实现双向数据绑定

Question

下面是一个关于Vue.js的问题：

如何在Vue组件中实现双向数据绑定？请给出一个简单的示例。

Answer 1

在Vue.js中，可以通过使用v-model指令来实现双向数据绑定。

下面是一个简单的示例：

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

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

在上述示例中，我们使用了v-model指令将input元素和数据中的message属性进行了双向绑定。当用户在input中输入内容时，message的值也会随之改变，同时，在

标签中使用了插值表达式{{ message }}，以显示message的内容。这样，无论是在input中修改message的值，还是在代码中修改message的值，两者都会保持同步。这就是Vue中的双向数据绑定。