Vue:计算属性

Vue:计算属性

    • 计算属性
    • get
    • set


在模板中,有时候填入的值要依赖于多个属性计算得出。

例如使用姓和名拼出全名:

在这里插入图片描述

以上效果可以通过以下代码实现:

<div id="root">姓:<input type="text" v-model="firstName"> <br/><br/>名:<input type="text" v-model="lastName"> <br/><br/>全名:<span>{{firstName}}-{{lastName}}</span> <br/><br/>
</div><script type="text/javascript">
new Vue({el:'#root',data:{firstName:'张',lastName:'三',}
})
</script>

把输入框与数据进行双向绑定,在<span>内部进行模板渲染。这样当然没有问题,但是如果需要更加复杂的字符串拼接,就会很复杂。

除此之外,也可以通过在methods内部创建方法,最后直接调用方法得到字符串:

new Vue({el:'#root',data:{firstName:'张',lastName:'三'},methods: {fullName(){return this.firstName + '-' + this.lastName}}
})

fullName方法中,完成字符串拼接并返回,最后直接在模板中调用方法:

全名:<span>{{fullName()}}</span>

使用函数,可以处理更加复杂的情况,但是这样效率很低。

当模板中任意一个变量更新,模板中所有表达式都会被重写计算,如果firstNamelastName以外的属性改变了,也会调用fullName方法,但是结果是不变的。

示例:

<div id="root">other:<input type="text" v-model="other"> <br/><br/>姓:<input type="text" v-model="firstName"> <br/><br/>名:<input type="text" v-model="lastName"> <br/><br/>全名:<span>{{fullName()}}</span>
</div><script type="text/javascript">new Vue({el:'#root',data:{other: '其它',firstName:'张',lastName:'三'},methods: {fullName(){const name = this.firstName + '-' + this.lastNameconsole.log("fullName更新为 " + name)return name}}})
</script>

现在增加了一个额外的other属性以及一个输入框,与other进行双向绑定。

每次调用fullName,都会输出自己被调用了,以及更新后的名称。

多次修改other框内部的内容:

在这里插入图片描述

此时fullName调用了18次,但是每一次fullName的值都是一样的,这会导致效率降低。


计算属性

为了兼顾效率以及复杂数据的处理,Vue推出了计算属性。

语法:

new Vue({computed:{计算属性:{// 函数}}
})

computed属性内部,可以配置多个计算属性,这些计算属性有getset方法,方法内可以使用data的值,来进行字符串拼接,数值计算等复杂行为。最后返回一个值,作为属性使用。


get

比如对姓名的拼接:

new Vue({el:'#root',data:{firstName:'张',lastName:'三',},computed:{fullName:{get(){return this.firstName + '-' + this.lastName}}}
})

以上代码定义了一个fullName计算属性,它的get方法返回一个拼接字符串,此处的this就是Vue实例,在实例下查找firstNamelastName,并拼接成值返回。

那么这个fullName计算属性如何使用?

既然叫计算属性,那么这就是一个属性,可以在模板中直接使用:

姓:<input type="text" v-model="firstName"> <br/><br/>
名:<input type="text" v-model="lastName"> <br/><br/>
全名:<span>{{fullName}}</span> <br/><br/>

计算属性最后也会被挂载到Vue实例下,与data下的属性用起来没有区别。

这种计算属性在效率上有两个优势:

  1. 在一次模板更新中,只会计算一次计算属性
  2. 只有计算属性依赖的其他属性改变,计算属性才会更新

在模板中,使用多次fullName

姓:<input type="text" v-model="firstName"> <br/><br/>
名:<input type="text" v-model="lastName"> <br/><br/>
全名:<span>{{fullName}}</span> <br/><br/>
全名:<span>{{fullName}}</span> <br/><br/>
全名:<span>{{fullName}}</span> <br/><br/>
全名:<span>{{fullName}}</span> <br/><br/>

输出结果:

在这里插入图片描述

可以看到,每次修改firstNamelastName,只会调用一次fullName方法,如果是之前的methods的方式实现字符串拼接,那么每次更新都会调用四次方法。

这是因为每次更新时,会把计算属性放到缓存中,如果后续再次遇到使用计算属性的地方,直接去缓存取用。

和之前一样,加一个无关的输入选项:

other:<input type="text" v-model="other"> <br/><br/>
姓:<input type="text" v-model="firstName"> <br/><br/>
名:<input type="text" v-model="lastName"> <br/><br/>
全名:<span>{{fullName}}</span> <br/><br/>

在这里插入图片描述

首先更新姓名,正常调用fullName了,后续更新other的值,不再触发fullName方法了。

因为other属性不是fullName依赖的属性,这个属性更新时不会重新计算fullName,这带来了很大的效率提升。


set

除了可以使用data下已有的数据计算值,计算属性还可以实现双向数据绑定,这依赖于set方法。

示例:

new Vue({el:'#root',data:{firstName:'张',lastName:'三',},computed:{fullName:{get(){return this.firstName + '-' + this.lastName},set(value){console.log('set 被调用',value)const arr = value.split('-')this.firstName = arr[0]this.lastName = arr[1]}}}
})

以上代码给fullName定义了一个set方法,只要fullName被改变,就会反过来修改firstNamelastName的值。

由于规定输入值必须是firstName-lastName,此时使用-作为分隔符进行split,再设置到this.firstNamethis.lastName中。

修改一下HTML样式:

姓:<input type="text" v-model="firstName"> <br/><br/>
名:<input type="text" v-model="lastName"> <br/><br/>
全名:<input type="text" v-model="fullName"> <br/><br/>

fullName也进行了双向数据绑定,这样就可以修改fullName的值了。

输出结果:

在这里插入图片描述

在下面的框把张-三改为李-四,调用了两次set,并且上面的输入框的值也改变了,说明成功通过fullName反向影响了firstNamelastName的值。

总结一下:

  1. 计算属性可以基于现有的data内的属性,进行复杂的计算,返回一个值
  2. 计算属性也是一个属性,可以直接在模板访问
  3. 计算属性效率比mthods高,只有依赖的属性被修改,才会调用,一次模板更新,最多计算一次计算属性
  4. 计算属性可以设置set,反过来影响依赖的data下的属性

最后,计算属性还有简写形式,如果计算属性没有set方法:

new Vue({computed:{fullName:{get(){return this.firstName + '-' + this.lastName}}}
})

此时可以把get方法一起省略,计算属性本身作为一个方法:

new Vue({computed:{fullName(){return this.firstName + '-' + this.lastName}}
})

两者是等效的。


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

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

相关文章

就业市场变革:AI时代,我们将如何评估人才?

内容概要 在这个充满变革的时代&#xff0c;就业市场正被人工智能&#xff08;AI&#xff09;技术深刻改变。随着技术的进步&#xff0c;传统的人才评估方式逐渐显示出其局限性。例如&#xff0c;过去依赖于纸质简历和面试评估的方式在快速变化的环境中难以准确识别真实的人才…

网站504错误出现的原因以及如何修复

504网关超时错误意味着上游服务器未能在规定时间内完成请求&#xff0c;导致无法传递网站内容。当您访问某个网站时&#xff0c;浏览器会向该网站的服务器发出请求。如果请求处理成功&#xff0c;服务器会返回200 OK状态码&#xff1b;但如果服务器响应超时&#xff0c;浏览器可…

学习RocketMQ(记录了个人艰难学习RocketMQ的笔记)

目录 一、部署单点RocketMQ 二、原理篇 三、实操篇 1、引入依赖 2、启动自动装配 3、配置application.yml 4、启动类 5、编写一个统一格式的消息对象 6、生产者 ​编辑 7、定义一个constant 8、多/单个消费者订阅一个主题 1.实现消费者 2.编写接口发送消息 3.接口…

安全关键型嵌入式系统设计模式整理及应用实例

本文提供了对安全关键型嵌入式系统设计模式的全面概述&#xff0c;这些模式旨在提高系统在面临潜在故障时的安全性和可靠性。文中详细介绍了15种设计模式&#xff0c;包括同质冗余&#xff08;HmD&#xff09;、异质冗余&#xff08;HtD&#xff09;、三模冗余&#xff08;TMR&…

京东零售推荐系统可解释能力详解

作者&#xff1a;智能平台 张颖 本文导读 本文将介绍可解释能力在京东零售推荐系统中的应用实践。主要内容包括以下几大部分&#xff1a;推荐系统可解释定义、系统架构、排序可解释、模型可解释、流量可解释。 推荐系统可解释定义 推荐系统可解释的核心包括三部分&#xff0…

java项目之校园周边美食探索及分享平台(springboot)

风定落花生&#xff0c;歌声逐流水&#xff0c;大家好我是风歌&#xff0c;混迹在java圈的辛苦码农。今天要和大家聊的是一款基于springboot的校园周边美食探索及分享平台。项目源码以及部署相关请联系风歌&#xff0c;文末附上联系信息 。 项目简介&#xff1a; 校园周边美食…

stack和queue --->容器适配器

不支持迭代器&#xff0c;迭代器无法满足他们的性质 边出边判断 实现 #define _CRT_SECURE_NO_WARNINGS 1 #include<iostream> #include<stack> #include<queue> using namespace std; int main() {stack<int> st;st.push(1);st.push(2);st.push(3);…

vue3动态监听div高度案例

案例场景 场景描述&#xff1a;现在左边的线条长度需要根据右边盒子的高度进行动态变化 实践代码案例 HTML部分 <div v-for"(device, index) in devices" :key"index"><!-- 动态设置 .left-bar 的高度 --><div class"left-bar"…

华为OD机试真题(Python/JS/C/C++)- 考点 - 细节

华为OD机试 2024E卷题库疯狂收录中&#xff0c;刷题 点这里。 本专栏收录于《华为OD机试真题&#xff08;Python/JS/C/C&#xff09;》。

Spring源码学习(五):Spring AOP

免责声明 本人还处于学习阶段&#xff0c;如果内容有错误麻烦指出&#xff0c;敬请见谅&#xff01;&#xff01;&#xff01;Demo <dependency><groupId>org.aspectj</groupId><artifactId>aspectjweaver</artifactId><version>1.8.8<…

vue 使用docx-preview 预览替换文档内的特定变量

在开发合同管理中&#xff0c;需要使用到此功能&#xff0c;就是替换合同模板内的一些字符串&#xff0c;如&#xff1a;甲乙方名称&#xff0c;金额日期等&#xff0c;合同内容不变。效果如下&#xff1a; 使用docx-preview 好处是只预览不可编辑内容。 前端vue import { re…

若依项目搭建

若依的大版本 基本环境搭建 搭建注意点

(11)(2.1.6) Hobbywing DroneCAN ESC(二)

文章目录 前言 2 配置ESC 3 测试 4 设置视频 5 参数说明 前言 具有 CAN 接口&#xff08;including these&#xff09;的业余 ESC 支持 DroneCAN&#xff0c;它允许自动驾驶仪通过 CAN 控制 ESC /电机&#xff0c;并检索单个转速、电压、电流和温度。 2 配置ESC 默认情…

JVM结构图

JVM&#xff08;Java虚拟机&#xff09;是Java编程语言的核心组件之一&#xff0c;负责将Java字节码翻译成机器码并执行。JVM由多个子系统组成&#xff0c;包括类加载子系统、运行时数据区、执行引擎、Java本地接口和本地方法库。 类加载子系统&#xff08;Class Loading Subsy…

【智能算法改进】混沌映射策略--一网打尽

摘要 本文研究了多种混沌映射策略在智能算法中的改进效果&#xff0c;提出了一种综合不同混沌映射策略的多元混合方法&#xff0c;以提高算法的全局优化能力和收敛速度。通过引入不同的混沌映射&#xff08;如 Logistic、Tent、Sine 等&#xff09;生成初始种群分布&#xff0…

QML —— QML调用C++两种方法(附完整测试源码)

代码效果 说明 QML 其实是对JavaScript 的扩展,融合了Qt Object 系统,它是一种新的解释型的语言, QML 引擎虽然由Qt C++ 实现,但QML 对象的运行环境,说到底和C++ 对象的上下文环境是不同的,是平行的两个世界。如果你想在QML 中访问C++ 对象,那么必然要找到一种途径来在两…

剧本杀小程序,市场发展下的新机遇

剧本杀作为休闲娱乐的一种游戏方式&#xff0c;在短时间内进入了大众视野中&#xff0c;受到了广泛关注。近几年&#xff0c;剧本杀行业面临着创新挑战&#xff0c;商家需求寻求新的发展机遇&#xff0c;在市场饱和度下降的趋势下&#xff0c;获得市场份额。 随着科技的不断进…

mysql error:1449权限问题 及 用户授权

一、权限问题 Got error: 1449: The user specified as a definer (skip-grants userskip-grants host) does not exist when using LOCK TABLES 在迁移数据库时&#xff0c;定义的definer&#xff0c;在两个数据库之间不同步时&#xff0c;要将不存在的definer改成数据库中已…

Spark 的Standalone集群环境安装与测试

目录 一、Standalone 集群环境安装 &#xff08;一&#xff09;理解 Standalone 集群架构 &#xff08;二&#xff09;Standalone 集群部署 二、打开监控界面 &#xff08;一&#xff09;master监控界面 &#xff08;二&#xff09;日志服务监控界面 三、集群的测试 &a…

基于SpringBoot+Vue实现新零售商城系统

作者主页&#xff1a;编程千纸鹤 作者简介&#xff1a;Java领域优质创作者、CSDN博客专家 、CSDN内容合伙人、掘金特邀作者、阿里云博客专家、51CTO特邀作者、多年架构师设计经验、多年校企合作经验&#xff0c;被多个学校常年聘为校外企业导师&#xff0c;指导学生毕业设计并参…