computed 计算属性与 v-model 一起实现数据双向绑定

最新推荐文章于 2025-06-17 16:15:05 发布

前端熊猫

最新推荐文章于 2025-06-17 16:15:05 发布

阅读量1.2k

点赞数 11

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_72030584/article/details/144539719

Vue 中的 computed 属性用于定义计算属性，这些属性默认缓存会根据其他数据属性的变化自动更新，即惰性求值。computed 属性有两种模式：只读和可读写。

一、只读 `computed` 属性

只读 computed 属性是最常见的用法，它只能用于获取值，不能设置值。这种属性通常用于依赖其他数据属性进行计算。

// vue2写法
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`;
    }
  }
};

// vue3 API的写法
<template>
  <div>
    <p>Full Name: {
  
  { fullName }}</p>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

const firstName = ref('John');
const lastName = ref('D