当前位置：首页 > VUE

vue 实现赋值

2026-02-10 11:17:53VUE

Vue 实现赋值的常见方法

在 Vue 中实现赋值操作可以通过多种方式，具体取决于数据的来源和作用域。以下是几种常见的方法：

使用 v-model 进行双向绑定

Vue 提供了 v-model 指令，用于在表单元素和组件上创建双向数据绑定。这种方式适用于表单输入元素，如 input、select 和 textarea。

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

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

使用计算属性赋值

计算属性可以基于响应式依赖进行缓存，只有在相关依赖发生改变时才会重新求值。适用于需要对数据进行复杂处理后再赋值的场景。

<template>
  <p>原始数据: {{ firstName }} {{ lastName }}</p>
  <p>计算属性: {{ fullName }}</p>
</template>

<script>
export default {
  data() {
    return {
      firstName: '张',
      lastName: '三'
    }
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName
    }
  }
}
</script>

使用方法进行赋值

可以通过定义方法来执行赋值操作，适用于需要触发条件或事件后赋值的场景。

<template>
  <button @click="updateMessage">更新消息</button>
  <p>{{ message }}</p>
</template>

<script>
export default {
  data() {
    return {
      message: '初始消息'
    }
  },
  methods: {
    updateMessage() {
      this.message = '更新后的消息'
    }
  }
}
</script>

使用 Vue.set 或 this.$set 进行响应式赋值

当需要向响应式对象添加新属性时，需要使用 Vue.set 或 this.$set 方法，确保新属性也是响应式的。

<template>
  <button @click="addProperty">添加属性</button>
  <p>{{ userInfo.name }}</p>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {}
    }
  },
  methods: {
    addProperty() {
      this.$set(this.userInfo, 'name', '李四')
    }
  }
}
</script>

使用 watch 监听数据变化

watch 选项可以监听特定数据的变化，并在变化时执行相应操作，适用于需要在数据变化时进行复杂处理的场景。

<template>
  <input v-model="question" placeholder="输入问题">
  <p>{{ answer }}</p>
</template>

<script>
export default {
  data() {
    return {
      question: '',
      answer: '等待输入问题...'
    }
  },
  watch: {
    question(newQuestion) {
      this.answer = '正在思考: ' + newQuestion
    }
  }
}
</script>

使用 ref 和 reactive (Vue 3)

在 Vue 3 中，可以使用 ref 和 reactive 函数创建响应式数据，并通过 .value 属性访问或修改 ref 的值。

<template>
  <button @click="increment">计数: {{ count }}</button>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)

    function increment() {
      count.value++
    }

    return {
      count,
      increment
    }
  }
}
</script>

以上方法涵盖了 Vue 中实现赋值的常见场景，可以根据具体需求选择合适的方式。

vue 实现赋值