用v-bind和v-on 如何实现双向绑定

要实现双向绑定，可以使用v-model指令，它本质上是v-bind和v-on的语法糖。具体来说，v-model会将表单元素的value属性与组件的data属性进行绑定，并且在输入时自动更新data属性的值，从而实现双向绑定。

例如，下面的代码演示了如何使用v-model实现双向绑定：

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

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

在上面的代码中，我们使用v-model将input元素的value属性与组件的message属性进行了双向绑定。当用户在input中输入内容时，message属性会自动更新，同时当我们在组件中更新message属性时，input中的内容也会自动更新。