vue 实现赋值

2026-01-13 03:55:55VUE

数据绑定赋值

在Vue中，通过v-model实现表单元素与数据的双向绑定。例如输入框的值会同步到Vue实例的data属性中：

<input v-model="message">

对应的Vue实例需定义message初始值：

data() {
  return {
    message: '' // 初始空值，随输入框变化
  }
}

直接属性赋值

通过this直接修改Vue实例的data属性：

this.message = '新值'; // 直接赋值触发响应式更新

需注意：若属性未在data中预先声明，需使用Vue.set或this.$set确保响应式：

vue 实现赋值

this.$set(this.someObject, 'newKey', 'value');

方法调用赋值

通过方法更新数据，例如事件触发时修改值：

<button @click="updateValue">更新数据</button>

方法定义：

vue 实现赋值

methods: {
  updateValue() {
    this.message = '点击后的值';
  }
}

异步赋值处理

异步操作（如API请求）完成后赋值需注意上下文。使用箭头函数或提前保存this：

fetchData().then(response => {
  this.message = response.data; // 箭头函数保留this
});

数组与对象赋值

修改数组或对象时，需使用特定方法或替换引用以保证响应式：

// 数组
this.items.splice(index, 1, newItem); // 替换元素
this.items = [...this.items, newItem]; // 新数组覆盖  

// 对象
this.someObject = { ...this.someObject, newKey: 'value' }; // 扩展运算符

计算属性赋值

通过计算属性的setter实现复杂逻辑赋值：

computed: {
  fullName: {
    get() { return this.firstName + ' ' + this.lastName; },
    set(newValue) {
      const names = newValue.split(' ');
      this.firstName = names[0];
      this.lastName = names[1];
    }
  }
}

调用this.fullName = 'John Doe'时会自动拆分赋值。