vue 计算属性

基础示例​

模板中的表达式虽然方便,但也只能用来做简单的操作。如果在模板中写太多逻辑,会让模板变得臃肿,难以维护。比如说,我们有这样一个包含嵌套数组的对象:

const author = reactive({name: 'John Doe',books: ['Vue 2 - Advanced Guide','Vue 3 - Basic Guide','Vue 4 - The Mystery']
})

我们想根据 author 是否已有一些书籍来展示不同的信息:

<p>Has published books:</p>
<span>{{ author.books.length > 0 ? 'Yes' : 'No' }}</span>

这里的模板看起来有些复杂。我们必须认真看好一会儿才能明白它的计算依赖于 author.books。更重要的是,如果在模板中需要不止一次这样的计算,我们可不想将这样的代码在模板里重复好多遍。

因此我们推荐使用计算属性来描述依赖响应式状态的复杂逻辑。这是重构后的示例:

<script setup>
import { reactive, computed } from 'vue'const author = reactive({name: 'John Doe',books: ['Vue 2 - Advanced Guide','Vue 3 - Basic Guide','Vue 4 - The Mystery']
})// 一个计算属性 ref
const publishedBooksMessage = computed(() => {return author.books.length > 0 ? 'Yes' : 'No'
})
</script><template><p>Has published books:</p><span>{{ publishedBooksMessage }}</span>
</template>

我们在这里定义了一个计算属性 publishedBooksMessagecomputed() 方法期望接收一个 getter 函数,返回值为一个计算属性 ref。和其他一般的 ref 类似,你可以通过 publishedBooksMessage.value 访问计算结果。计算属性 ref 也会在模板中自动解包,因此在模板表达式中引用时无需添加 .value

Vue 的计算属性会自动追踪响应式依赖。它会检测到 publishedBooksMessage 依赖于 author.books,所以当 author.books 改变时,任何依赖于 publishedBooksMessage 的绑定都会同时更新。

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

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

相关文章

量化交易入门(二十八)什么是布林带,量化中怎么使用

什么叫布林带 布林带&#xff08;Bollinger Bands&#xff09;是一种常用的技术分析指标&#xff0c;由约翰布林&#xff08;John Bollinger&#xff09;于20世纪80年代开发。它由三条线组成&#xff1a;中轨&#xff08;通常为20日移动平均线&#xff09;、上轨&#xff08;中…

【IC前端虚拟项目】write_path子模块DS与RTL编码

【IC前端虚拟项目】数据搬运指令处理模块前端实现虚拟项目说明-CSDN博客 read_path的代码完成之后,就可以开始整个项目里复杂度最高、bug最多、时序收敛最为困难的模块——write_path的开发了!我自己写过两次这个虚拟项目,每次都是在这里耗时最久,所以大家也可以挑战一下自…

Java虚拟机(JVM)知识点总结

一. Java内存区域 1. JVM的内存区域划分&#xff0c;以及各部分的作用 可分为运行时数据区域和本地内存&#xff0c;按照线程私有和线程共享分类&#xff1a; 线程私有&#xff1a;程序计数器、虚拟机栈、本地方法栈。 线程共享&#xff1a;堆、方法区、直接内存。 JDK1.7…

[Python GUI PyQt] PyQt5快速入门

PyQt5快速入门 PyQt5的快速入门0. 写在前面1. 思维导图2. 第一个PyQt5的应用程序3. PyQt5的常用基本控件和布局3.1 PyQt5的常用基本控件3.1.1 按钮控件 QPushButton3.1.2 文本标签控件 QLabel3.1.3 单行输入框控件 QLineEdit3.1.4 A Quick Widgets Demo 3.2 PyQt5的常用基本控件…

斜坡发生器(也称为斜坡函数或斜坡控制)是一种用于渐进式地改变系统中某个参数或状态的算法

斜坡发生器&#xff08;也称为斜坡函数或斜坡控制&#xff09;是一种用于渐进式地改变系统中某个参数或状态的算法。在自动化控制系统&#xff08;如机器人控制、电机控制、过程控制等&#xff09;中&#xff0c;当参数需要从一个值平滑地过渡到另一个值&#xff0c;而不是瞬间…

Redis入门到实战-第五弹

Redis入门到实战 Redis中Hashes数据类型常见操作官网地址Redis概述Hashes常见操作更新计划 Redis中Hashes数据类型常见操作 完整命令参考官网 官网地址 声明: 由于操作系统, 版本更新等原因, 文章所列内容不一定100%复现, 还要以官方信息为准 https://redis.io/Redis概述 R…

GEE教程——如何利用sentinel-2影像实现指定区域的NDVI时序分析

简介 要利用 Sentinel-2 影像实现指定区域的 NDVI 时序分析,可以按照以下步骤操作: 1. 获取 Sentinel-2 影像数据:访问 Copernicus Open Access Hub 网站(https://scihub.copernicus.eu/dhus/#/home),注册账号并登录。使用搜索功能选择感兴趣的区域,并下载 Sentinel-2…

go中结构体标签:omitempty、json꞉“name“、 gorm꞉“column꞉name“、yaml꞉“name“

在Go语言中&#xff0c;结构体标签&#xff08;Struct Tags&#xff09;提供了一种在编译时附加到结构体字段上的元数据&#xff0c;这些标签可以被运行时的反射&#xff08;reflection&#xff09;机制读取。结构体标签的存在意义和用途非常广泛&#xff0c;主要包括&#xff…

Chrome 插件各模块使用 Fetch 进行接口请求

Chrome 插件各模块使用 Fetch 进行接口请求 常规网页可以使用 fetch() 或 XMLHttpRequest API 从远程服务器发送和接收数据&#xff0c;但受到同源政策的限制。 内容脚本会代表已注入内容脚本的网页源发起请求&#xff0c;因此内容脚本也受同源政策的约束&#xff0c;插件的来…

k8s入门到实战(十四)—— Helm详细介绍及使用

Helm 使用 Helm 是一个 k8s 应用的包管理工具&#xff0c;类似于 Ubuntu 的 APT 和 CentOS 中的 YUM。 Helm 使用 chart 来封装 k8s 应用的 yaml 文件&#xff0c;我们只需要设置自己的参数&#xff0c;就可以实现自动化的快速部署应用。 Helm 通过打包的方式&#xff0c;支…

COMP9311 Project

COMP9311 (24T1) 1 COMP9311 24T1: Project 1 Deadline: Fri 16:59:59 March 29 th (Sydney Time) 1. Aims This project aims to give you practice in • Reading and understanding a moderately large relational schema (MyMyUNSW). • Implementing SQL queri…

Spring 源码调试问题 ( List.of(“bin“, “build“, “out“); )

Spring 源码调试问题 文章目录 Spring 源码调试问题一、问题描述二、解决方案 一、问题描述 错误&#xff1a;springframework\buildSrc\src\main\java\org\springframework\build\CheckstyleConventions.java:68: 错误: 找不到符号 List<String> buildFolders List.of…

【问题分析】InputDispatcher无焦点窗口ANR问题【Android 14】

1 问题描述 Monkey跑出的无焦点窗口的ANR问题。 特点&#xff1a; 1&#xff09;、上层WMS有焦点窗口&#xff0c;为Launcher。 2&#xff09;、native层InputDispacher无焦点窗口&#xff0c;上层为”recents_animation_input_consumer“请求了焦点&#xff0c;但是”rece…

NOIP2007奖学金问题及简单背包问题

引言&#xff1a; 最近刷了一些洛谷的基础算法题&#xff0c;关于排序类和贪心类&#xff0c;也发现了结构体用在这两种题目上的异曲同工之妙&#xff0c;那么我们废话不多说&#xff0c;直接上题目与解析帮助大家更好地掌握。 题目描述 某小学最近得到了一笔赞助&#xff0…

整理git上的模板框架

vite-vue3.0-ts-pinia-uni-app 技术栈的app框架 功能&#xff1a;基于 uni-app&#xff0c;一端发布多端通用&#xff0c;目前已经适配 H5、微信小程序、QQ小程序、Ios App、Android App。 taro3vue3tsnutuipinia taro3 框架小程序跨端平台 vue3.0-element-vite-qiankun 后台…

优雅的使用ChromeDriver

在网页自动化测试中,我们经常需要控制浏览器执行各种操作。对于Python开发者来说,可以使用 Selenium 库来实现这一目的。Selenium需要与浏览器的驱动程序(Driver)配合使用,本文将介绍如何在Windows 11系统下载ChromeDriver并正确保存。 第一步:确定Chrome浏览器版本号 打开Ch…

HarmonyOS实战开发-如何构建多种样式弹窗

介绍 本篇Codelab将介绍如何使用弹窗功能&#xff0c;实现四种类型弹窗。分别是&#xff1a;警告弹窗、自定义弹窗、日期滑动选择器弹窗、文本滑动选择器弹窗。需要完成以下功能&#xff1a; 点击左上角返回按钮展示警告弹窗。点击出生日期展示日期滑动选择器弹窗。点击性别展…

计算机xinput1_3.dll丢失的解决方法,分享5种有效的解决方法

在计算机系统的运行过程中&#xff0c;当用户或应用程序试图访问某个特定功能时&#xff0c;可能会遇到“找不到xinput1_3.dll”这一错误提示。这个问题通常是由于系统文件缺失或损坏导致的。许多依赖于“xinput1_3.dll”文件的游戏、软件或工具在启动时会立即遭遇阻碍。由于该…

rust使用Command库调用cmd命令或者shell命令,并支持多个参数和指定文件夹目录

想要在不同的平台上运行flutter doctor命令&#xff0c;就需要知道对应的平台是windows还是linux&#xff0c;如果是windows就需要调用cmd命令&#xff0c;如果是linux平台&#xff0c;就需要调用sh命令&#xff0c;所以可以通过cfg!实现不同平台的判断&#xff0c;然后调用不同…

Excel·VBA数组分组问题

看到一个帖子《excel吧-数据分组问题》&#xff0c;对一组数据分成4组&#xff0c;使每组的和值相近 目录 代码思路1&#xff0c;分组形式、可分组数代码1代码2代码2举例 2&#xff0c;数组所有分组形式举例 这个问题可以转化为2步&#xff1a;第1步&#xff0c;获取一组数据…