当前位置：首页 > VUE

怎么用vue.js实现双向绑定

2026-02-25 15:18:49VUE

使用 `v-model` 指令

Vue.js 提供了 v-model 指令用于实现表单元素与数据的双向绑定。v-model 会根据输入类型自动选择正确的方式更新数据。

示例代码：

<template>
  <div>
    <input v-model="message" placeholder="输入内容">
    <p>输入的内容是：{{ message }}</p>
  </div>
</template>

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

v-model 默认绑定 value 属性并监听 input 事件，适用于 <input>、<textarea> 和 <select> 等表单元素。

自定义组件的双向绑定

在自定义组件中实现双向绑定，需使用 v-model 并定义 model 选项或通过 props 和 emit 实现。

方法 1：使用 v-model 和 emit

<template>
  <div>
    <custom-input v-model="customMessage"></custom-input>
    <p>自定义组件的内容：{{ customMessage }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      customMessage: ''
    }
  },
  components: {
    'custom-input': {
      props: ['value'],
      template: `
        <input 
          :value="value" 
          @input="$emit('input', $event.target.value)"
        >
      `
    }
  }
}
</script>

方法 2：使用 model 选项（Vue 2.x）

components: {
  'custom-input': {
    model: {
      prop: 'value',
      event: 'input'
    },
    props: ['value'],
    template: `
      <input 
        :value="value" 
        @input="$emit('input', $event.target.value)"
      >
    `
  }
}

计算属性与 `v-model`

结合计算属性实现复杂逻辑的双向绑定，例如格式化输入内容。

示例：

<template>
  <div>
    <input v-model="formattedValue" placeholder="输入数字">
    <p>格式化后的值：{{ formattedValue }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rawValue: ''
    }
  },
  computed: {
    formattedValue: {
      get() {
        return this.rawValue;
      },
      set(value) {
        this.rawValue = value.replace(/\D/g, ''); // 只保留数字
      }
    }
  }
}
</script>

修饰符

v-model 支持修饰符以简化数据处理：

.lazy：将 input 事件改为 change 事件（失去焦点时更新）。
.number：自动将输入转为数字类型。
.trim：自动去除首尾空格。

示例：

怎么用vue.js实现双向绑定

<input v-model.lazy="lazyValue" placeholder="延迟更新">
<input v-model.number="numericValue" placeholder="转为数字">
<input v-model.trim="trimmedValue" placeholder="去除空格">

通过以上方法，可以灵活实现 Vue.js 中的双向绑定功能。