vue中计算属性computed简单使用与传递参数

这篇文章距离上次修改已过440天，其中的内容可能已经有所变动。




<template>
  <div>
    <!-- 使用计算属性显示信息 -->
    <p>姓名：{{ fullName }}</p>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      firstName: '张',
      lastName: '三'
    };
  },
  computed: {
    // 计算属性定义方法，不带括号
    fullName() {
      // 返回计算后的数据
      return `${this.firstName} ${this.lastName}`;
    }
  }
};
</script>

这个例子中，我们定义了一个计算属性fullName，它会根据data中的firstName和lastName自动计算并返回全名。在模板中，我们直接使用{{ fullName }}来显示计算后的结果。这是计算属性的基本用法。

vue中计算属性computed简单使用与传递参数

评论已关闭

推荐阅读