当前位置：首页 > article >正文

[vue]计算属性

article 2025/3/30 21:42:37

文章目录

一、语法介绍
二、添加代码
三、结果展示
四、参考文献

如有错误，请指正！！！

一、语法介绍

1、问题来源
我们在处理网页时，如果在模版中放入过多的逻辑就会变得难以维护，这时就要用到计算属性来优化逻辑。
2、解决办法
利用computed来优化逻辑。

二、添加代码

<template>
  <h3>{{ name }}</h3>
  <p>{{ language.length > 0 ? "yes" : "no" }}</p>
  <!-- 这里直接使用计算属性 -->
  <p>{{ content }}</p>
  <!-- 这里直接使用函数 -->
  <p>{{ content1() }}</p>
</template>

<script>
export default {
  data() {
    return {
      name: "语言",
      language: ["c++", "java", "python"],
    };
  },
  //计算属性
  computed: {
    content() {
      return this.language.length > 0 ? "yes" : "no";
    },
  },

  //函数和方法
  methods: {
    content1() {
      return this.language.length > 0 ? "yes" : "no";
    },
  },
};
</script>