vu e数据双向绑定怎么写

在 Vue 中，可以通过 `v-model` 指令来实现双向数据绑定。`v-model` 指令可以用在 input、select、textarea 等表单元素上，例如：

<input v-model="message" type="text">

在上面的代码中，`message` 是 Vue 实例的一个属性，它绑定在 input 元素上。当用户在 input 元素中输入内容时，Vue 会自动将输入的内容赋值给 `message` 属性，并更新视图中对应的插值表达式。

除了使用 `v-model` 指令，还可以通过 `$watch` 方法来实现数据的双向绑定。`$watch` 方法用于监听数据的变化，并在数据发生变化时执行指定的回调函数。例如：

export default {
  data() {
    return {
      message: ''
    }
  },
  watch: {
    message(newValue, oldValue) {
      console.log('message changed:', newValue, oldValue)
    }
  }
}

在上面的代码中，`message` 是 Vue 实例的一个属性，`watch` 属性是一个对象，用于定义要监听的属性和对应的回调函数。当 `message` 属性的值发生变化时，Vue 会自动调用 `watch` 中对应的回调函数，并传入新值和旧值作为参数。

需要注意的是，如果要在组件中使用 `v-model`，需要同时定义一个 `value` 属性和一个 `input` 事件。例如：

<template>
  <div>
    <input :value="value" @input="$emit('input', $event.target.value)">
  </div>
</template>

<script>
export default {
  props: ['value']
}
</script>

在上面的代码中，`value` 是组件的一个 prop，它绑定在 input 元素的 `value` 属性上。当用户在 input 元素中输入内容时，会触发 `input` 事件，并将输入的内容作为参数传递给 `$emit` 方法，从而实现双向数据绑定。