【Vue3基础】计算属性-Toy模板网

这篇具有很好参考价值的文章主要介绍了【Vue3基础】计算属性。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、需求

二、代码

1、创建项目

创建项目：
1、 npm init vue@latest
2、一路回车
3、输入项目名，不要大写，如vue3bilibili
4、 cd vue3bilibili
5、 npm install
6、npm run dev启动，可以获取网址

【Vue3基础】计算属性,学习,vue3

2、App.vue文件中：

<script setup>
import studyDemo from "./components/studyDemo.vue"

</script>
<template>
  <studyDemo/>
</template>

3、studyDemo.vue文件

<template>
    <h3>{{ study.name }}</h3>
    <p>{{ study.course.length>0?'Yes':'No' }}</p>
  </template>
  
  <script>
  export default{
    data(){
      return{
        study:{
          name:"初中",
          course:["数学","物理","化学"]
        }
      }
    }
  }
  </script>

用计算属性来处理逻辑，注意引用时不用加括号，写名称即可；
若放函数或者方法，引用时注意加括号。

重点区别:
计算属性:计算属性值会基于其响应式依赖被缓存。一个计算属性仅会在其响应式依赖更新时才重新计算。
方法: 方法调用总是会在重染发生时再次执行函数。

<template>
    <h3>{{ study.name }}</h3>
    <p>{{ Count }}</p>
    <p>{{ Count2() }}</p>
  </template>
  
  <script>
  export default{
    data(){
      return{
        study:{
          name:"初中",
          course:["数学","物理","化学"]
        }
      }
    },
    //计算属性
    computed:{
        Count(){
            return this.study.course.length>0?'Yes':'No' ;
        }
    },
    //放函数或者方法
    methods:{
        Count2(){
            return this.study.course.length>0?'Yes':'No' ;
        }
    } 
  }
  </script>

浏览器运行结果：

【Vue3基础】计算属性,学习,vue3

三、链接

1、学习视频https://www.bilibili.com/video/BV1Rs4y127j8?p=7&spm_id_from=pageDriver&vd_source=841fee104972680a6cac4dbdbf144b50文章来源地址https://www.toymoban.com/news/detail-600954.html

到了这里，关于【Vue3基础】计算属性的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！