【Vue3基础】计算属性

news2025/1/12 21:45:14

一、需求

二、代码

1、创建项目

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

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>
  

浏览器运行结果:

三、链接

1、学习视频https://www.bilibili.com/video/BV1Rs4y127j8?p=7&spm_id_from=pageDriver&vd_source=841fee104972680a6cac4dbdbf144b50

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/778167.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

UNIX网络编程卷一 学习笔记 第二十五章 信号驱动式IO

信号驱动式IO指进程预先告知内核&#xff0c;当某个描述符上发生某事时&#xff0c;内核使用信号通知相关进程&#xff0c;它在历史上曾被称为异步IO&#xff0c;但信号驱动式IO不是真正的异步IO&#xff0c;真正的异步IO通常定义为进程执行IO系统调用告知内核启动某个IO操作&a…

Kafka-partition和消费者的关系

Kafka-partition 目录概述需求&#xff1a; 设计思路实现思路分析1.Kafka-partition2.消费者数量小于分区数量3. 拓展实现 参考资料和推荐阅读 Survive by day and develop by night. talk for import biz , show your perfect code,full busy&#xff0c;skip hardness,make a…

五笔打字练习经验总结

背景 我之前对键盘不太熟悉&#xff0c;打字的速度我测了一下大概是在30/m的样子&#xff0c;于是想提高自己的打字速度&#xff0c;就练习了下&#xff0c;现在大概到了60/m。由于自己打字拼音打字错误率较高&#xff0c;因为手指键位练习不到位&#xff0c;已经很难纠正了。所…

LeetCode[148]排序链表

难度&#xff1a;Medium 题目&#xff1a; 给你链表的头结点 head &#xff0c;请将其按 升序 排列并返回 排序后的链表 。 示例 1&#xff1a; 输入&#xff1a;head [4,2,1,3] 输出&#xff1a;[1,2,3,4]示例 2&#xff1a; 输入&#xff1a;head [-1,5,3,4,0] 输出&…

IOR的安装及使用

简介 IOR 是一种并行 IO 基准测试&#xff0c;可用于测试使用各种接口和访问模式的并行存储系统的性能。IOR存储库还包括mdtest基准测试&#xff0c;专门测试不同目录结构下存储系统的峰值元数据速率。两个基准测试都使用通用并行 I/O 抽象后端&#xff0c;并依赖 MPI 进行同步…

Vue复选框、下拉框使用案例,复选框选项元素(el-checkbox)换行竖向显示

一、复选框 1、<el-checkbox-group></el-checkbox-group>的选项元素默认是行横向显示 <el-checkbox-groupv-model"additionalPermissionsParams.permissionList"change"permissionChange($event)"><el-checkbox label"10"…

c++学习(红黑树)[20]

概念 红黑树&#xff08;Red-Black Tree&#xff09;是一种自平衡的二叉搜索树&#xff0c;它在插入和删除节点时通过一系列的旋转和重新着色操作来保持树的平衡。红黑树的平衡性质使得它在插入、删除和查找等操作上具有较好的性能。 红黑树具有以下特点&#xff1a; 每个节…

【项目开发】商城 - 三级分类 - 简单笔记

目录标题 后端业务类实体类 前端最终实现效果排序变化批量删除 后端 业务类 // 省略其他简单的CRUDOverridepublic List<CategoryEntity> listWithTree() {// 1、查出所有分类List<CategoryEntity> list baseMapper.selectList(null);// 2. 找出所有的一级分类Li…

NOAA官网下载的气象雷达原始数据转化为NC文件详细步骤

一、准备工作 1.先在NOAA官网下载好气象雷达原始数据 NOAA官网下载气象雷达资料详细步骤_珞瑜的博客-CSDN博客 下载好的雷达数据有两种类型Level-2和Level-3。 如上图所示,为气象雷达数据的Level-2产品,站点名字:K

springboot mybatis-plus 多数据源配置(HikariCP)

1.导入依赖jar <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-jdbc</artifactId></dependency><dependency><groupId>org.postgresql</groupId><artifactId>postgres…

iOS--虚拟内存

参考文章 要想了解什么是VM Regions&#xff0c;就得先了解什么是虚拟内存。当我们向系统申请内存时&#xff0c;系统并不会给你返回物理内存的地址&#xff0c;而是给你一个虚拟内存地址。每个进程都拥有相同大小的虚拟地址空间&#xff0c;对于32位的进程&#xff0c;可以拥有…

【N32L40X】学习笔记06-串口dma空闲中断+dma接收数据

串口dma 8 个可独立配置的 DMA 通道。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VchCudlf-1689952378831)(./picture/dma.png)] 实例代码 串口dma使用的是串口绑定方式实现串口的dma数据传输 bsp_uart_dma.h #ifndef _BSP_UART_DMA_H_ #def…

STM32(HAL库)驱动(1.44寸)TFT-LCD彩屏

目录 1、简介 2、CubeMX初始化配置 2.1 基础配置 2.1.1 SYS配置 2.1.2 RCC配置 2.2 屏幕引脚配置 2.3 项目生成 3、KEIL端程序整合 3.1 LCD驱动添加 3.2 函数修改 3.2.1 lcd.h修改 3.2.2 lcd_innit.h 修改 3.2.3 lcd.c修改 3.2.4 lcd_inut.c修改 3.3 主函数代码 3.3…

网络安全(零基础)自学

一、网络安全基础知识 1.计算机基础知识 了解了计算机的硬件、软件、操作系统和网络结构等基础知识&#xff0c;可以帮助您更好地理解网络安全的概念和技术。 2.网络基础知识 了解了网络的结构、协议、服务和安全问题&#xff0c;可以帮助您更好地解决网络安全的原理和技术…

Spring Cloud Alibaba 集成 Skywalking 链路追踪

Spring Cloud Alibaba 集成 Skywalking 链路追踪 简介 skywalking 是一个国产开源框架&#xff0c;2015 年由吴晟开源 &#xff0c; 2017 年加入 Apache 孵化器。skywalking 是分布式系统的应用程序性能监视工具&#xff0c;专为微服务、云原生架构和基于容器&#xff08;Doc…

前端 | ( 十)HTML5简介及相关新增属性 | 尚硅谷前端html+css零基础教程2023最新

学习来源&#xff1a;尚硅谷前端htmlcss零基础教程&#xff0c;2023最新前端开发html5css3视频 文章目录 &#x1f4da;HTML5简介&#x1f407;什么是HTML5&#x1f407;HTML5 优势&#x1f407;HTML5兼容性 &#x1f4da;新增语义化标签&#x1f407;新增布局标签&#x1f407…

怎样原生制作lis的CentOS容器镜像

本文介绍从一个空白的裸机CentOS自己构造检验允许的docker环境。来达到运行环境的高度定制&#xff0c;而不是只能依赖VS或者微软或者数据库厂商提供的镜像当做基础制作。更容易理解基础原理。最终输出产物为lisnew.tar&#xff0c;一个开箱即用的lis运行环境。 制作的整个过程…

自动驾驶分级和技术架构

标题SAE 和 NHTSA自动驾驶分级 当前全球汽车行业中两个最权威的分级系统由美国国家公路交通安全管理局&#xff08;NHTSA&#xff09;和国际自动化工程师协会(SAE)提出。2013年&#xff0c;NHTSA将驾驶自动化的描述分为5个层级。2014年1月&#xff0c;SAE制定J3016自动驾驶分级…

【深度学习-神经网络架构-通俗易懂的入门课程】

文章目录 深度学习与AI的关系机器学习的流程机器学习的核心以及问题深度学习要解决的问题模型如何搭建&#xff1f;特征如何提取&#xff1f;为什么要深度学习&#xff1f; 深度学习的应用深度学习的问题计算机视觉任务分类与检索如何实现分类 神经网络基础线性函数损失函数防止…

Golang 中的可测试示例函数(Example Function)详解

Golang 可测试示例含函数 (Example Function) 示例函数类似于单元测试函数&#xff0c;但没有 *testing 类型的参数。编写示例函数也是很容易的&#xff1a; 创建对应的测试文件&#xff1a;在 Go 项目的源代码目录下创建一个新的文件&#xff08;和被测代码文件在同一个包&…