vue修改计算属性的值_「Vue学习记录五」计算属性和侦听器

d63aeea3c4e62610ecf65df86c542803.png

1: 计算属性: (内置缓存机制)

当更改age的时候, fullName 函数不执行;

当更改fristName的时候, fullName 函数才执行

<div id = "app"><span>{{fullName}}</span> <span>{{age}}</span>
</div><script>var vm = new Vue({el : "#app",data: {fristName : "Christine",lastName : "Gao",age : "26"},// “计算属性” 实现:  具有缓存机制, 即改变年龄的时候, 执行 fullName 函数computed : {fullName : function () {console.log("计算了一次");return this.fristName + " " + this.lastName;}}})</script>

「效果如下:」

f9d5e85eb18a5dc2ca3ea7da8e525008.png

get和set用法

计算属性默认只有 getter,不过在需要时你也可以提供一个 setter:

<div id="app"><span>{{fullName}}</span><span>{{age}}</span>
</div><script>var vm = new Vue({el: "#app",data: {firstName: 'Foo',lastName: 'Bar',age:'26',},computed: {fullName:{get() {//回调函数 当需要读取当前属性值是执行,根据相关数据计算并返回当前属性的值console.log(this.firstName + ' ' + this.lastName)return this.firstName + ' ' + this.lastName},set(val) {//监视当前属性值的变化,当属性值发生变化时执行,更新相关的属性数据//val就是fullName的最新属性值console.log(val)const names = val.split(' ');console.log(names)this.firstName = names[0];this.lastName = names[1];}}}})

现在再运行 vm.fullName = 'John Doe' 时,setter 会被调用,vm.firstName 和 vm.lastName 也会相应地被更新。

「效果如下」

e0745a3d601930065c7aea312f8590f3.png

2、方法: (无内置缓存)

当更改age的时候, fullName 函数执行, 这样就增加了代码冗余,浏览器运行性能降低;

当更改fristName的时候, fullName 函数仍执行。

<div id = "app"><span>{{fullName()}}</span><span>{{age}}</span>
</div><script>var vm = new Vue({el : "#app",data: {fristName : "Christine",lastName : "Gao",age : "26"},// “方法” 实现 : 改变年龄的时候, 也会执行 fullName 函数methods : {fullName : function () {console.log("用方法,计算了一次")return  this.fristName + " " + this.lastName;}}})</script>

「效果如下:」

2199718d6f3f005322d445211fc846ab.png

3、侦听器: (有内置缓存)

跟“计算属性”相似, 但是代码相较于“计算属性”而言, 比较繁琐且冗余。

  <div id = "app"><span>{{fullName}}</span><span>{{age}}</span>
</div>
<script>var vm = new Vue({el : "#app",data: {fristName : "Christine",lastName : "Gao",fullName : "Christine Gao",age : "26"},// “侦听” 实现 :实现了缓存, 但是代码冗余。watch : {firstName : function () {console.log("侦听实现 , 计算了一次");this.fullName = this.fristName + " " + this.lastName;},lastName : function () {console.log("侦听实现 , 计算了一次");this.fullName = this.fristName + " " + this.lastName;}}})</script>

「效果如下:」

28a1c89d4612672f37ce295d077b08b3.png

监听 基础用法

放在 data 中的对象,一旦发生改变就会执行相应的操作,当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的

<div id="app"><p>FullName: {{fullName}}</p><p>FirstName: <input type="text" v-model="firstName"></p>
</div><script>var vm = new Vue({el: '#app',data: {firstName: 'Joy',lastName: 'lqy',fullName: ''},watch: {firstName(newName, oldName) {this.fullName = newName + ' ' + this.lastName;}}})
</script>

watch 中的对象在 data 中已经定义了,当我们输入firstName后, watch监听每次修改变化的新值,然后计算输出fullName。也就是上面的代码中,fullName 一开始被渲染出来的时候是空值,如下所示:

ed1f2e3a5d10c8e81c7f0c955ac07634.png

监听 高级用法

handler方法和immediate属性

如上所述,一开始被渲染出来的时候,fullName是空值,如果想要一开始就让最初绑定的值执行该怎么办尼?别急,我们只需要给firstName绑定一个handler方法,之前我们写的watch方法其实默认写的就是这个handler,Vue.js会去处理这个逻辑,最终编译出来其实就只这个handler,设置immediate:true代表如果在 wacth 里声明了 firstName 之后,就会立即先去执行里面的handler方法,如果为 false就跟我们以前的效果一样,不会在绑定的时候就执行

修改后的代码如下:

<div id="app"><p>FullName: {{fullName}}</p><p>FirstName: <input type="text" v-model="firstName"></p>
</div><script>var vm = new Vue({el: '#app',data: {firstName: 'Joy',lastName: 'lqy',fullName: ''},watch: {firstName: {handler(newName, oldName) {this.fullName = newName + ' ' + this.lastName;},// 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法immediate: true}}})
</script>

deep属性

deep,默认值为false,代表是否深度监听,

总的来说,计算属性倾向于格式化/处理当前的数据,而 watch 倾向于执行数据变化需要进行的操作

参考资料

[1] https://segmentfault.com/a/1190000016593017

[2] https://www.jianshu.com/p/6f433b39fb8a

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

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

相关文章

python把485读回来的转为位_我能用Python读取从计算机上接收到的Modbus RS485数据吗?...

modbus-tk可以编写自己的modbus从站。在下面是一个运行RTU服务器的示例&#xff0c;该服务器有100个保持寄存器&#xff0c;从地址0开始&#xff1a;import sysimport modbus_tkimport modbus_tk.defines as cstfrom modbus_tk import modbus_rtuimport serialPORT 0#PORT /d…

git为私有仓库设置密码_真香!在局域网下行云流水般使用git

最近公司要开发一个新的项目&#xff0c;开发一个新的项目就要有一个好的代码版本管理工具。对于代码开发版本控制工具&#xff0c;我们之前是使用svn这个代码版本控制工具&#xff0c;但是项目经理说统一使用git开发版本控制工具&#xff0c;来到这里我们一般会选择gitee或者g…

xss img onerror java_java后台防止XSS的脚本攻击

import java.util.regex.Pattern;//具体过滤关键字符public class XSSUtil {private static Pattern[] patterns new Pattern[]{// Script fragmentsPattern.compile("", Pattern.CASE_INSENSITIVE),// src...Pattern.compile("src[\r\n]*[\r\n]*\\\(.*?)\\\&…

网口监视报文工具_真是神器!这款网络排查工具!

常用的 ping&#xff0c;tracert&#xff0c;nslookup 一般用来判断主机的网络连通性&#xff0c;其实 Linux 下有一个更好用的网络联通性判断工具&#xff0c;它可以结合ping nslookup tracert 来判断网络的相关特性&#xff0c;这个命令就是 mtr。mtr 全称 my traceroute&…

snmp服务 2003 镜像_美国掌握全球70%根服务器,一旦对中国关闭,我们将无法上网?...

“如果在上网和男朋友(女朋友)之间只能选一个&#xff0c;你会选哪个&#xff1f;”曾经有媒体在街头做这样的调查&#xff0c;出人意料的是很多人都选择了“上网”&#xff1b;因为在现代年轻人看来&#xff0c;如果进入一个没有“不能上网”的生活实在太恐怖了&#xff0c;那…

java写入carbondata_Carbondata使用过程中遇到的几个问题及解决办法

本文总结了几个本人在使用 Carbondata 的时候遇到的几个问题及其解决办法。这里使用的环境是&#xff1a;Spark 2.1.0、Carbondata 1.2.0。必须指定 HDFS nameservices在初始化 CarbonSession 的时候&#xff0c;如果不指定 HDFS nameservices&#xff0c;在数据导入是没啥问题…

商品审核网页界面_Shopee新手指南:Shopee卖家中心用户界面介绍

1.Shopee各站点前台网页链接&#xff1a;2.Shopee各站点后台网页链接3.Shopee APP下载&#xff1a;安卓版下载链接&#xff1a;https://pan.baidu.com/s/1eSp8M1k#list/path%2Fios版&#xff1a;可在App Store中直接搜索下载使用。台湾站点ios版本请搜索关键字“虾皮”下载&…

pdf exe如何提取pdf文件_python应用:如何用python提取pdf文件中的文字

从pdf中提取文字&#xff0c;相信很多人都干过这事&#xff0c;怎么在python中实现呢&#xff0c;今天带大家看看。第一步导入库import PyPDF2第二步导入pdf文件pdf_file open(dataset/laban.1027.pdf, rb)第三步读取pdf并检查加密情况read_pdf PyPDF2.PdfFileReader(pdf_file…

python asyncio tcp server_asyncio异步IO——Streams详解

前言本文翻译自python3.7官方文档——asyncio-stream,译者马鸣谦,邮箱 1612557569qq.com。转载请注明出处。数据流(Streams)数据流(Streams)是用于处理网络连接的高阶异步/等待就绪(async/await-ready)原语,可以在不使用回调和底层传输协议的情况下发送和接收数据。以下是一个用…

java轻量分布式框架_5个强大的Java分布式缓存框架推荐

在开发中大型Java软件项目时&#xff0c;很多Java架构师都会遇到数据库读写瓶颈&#xff0c;如果你在系统架构时并没有将缓存策略考虑进去&#xff0c;或者并没有选择更优的 缓存策略&#xff0c;那么到时候重构起来将会是一个噩梦。本文主要是分享了5个常用的Java分布式缓存框…

python三次样条插值拟合的树行线_数学建模笔记——插值拟合模型(一)

啊好像距离上次写作又过了七天&#xff0c;啊好像我之前计划的一周两三篇&#xff0c;啊辣鸡小说毁我青春&#xff0c;啊我是一只可怜的鸽子。不管怎样&#xff0c;我又回来了&#xff0c;并坚定地更新着hhh。再过两三天就是我们学校数学建模选拔&#xff0c;再过八九天就是期末…

python内置函数open的解释_在python的内置open()函数中缓冲的用途是什么?

Python文档&#xff1a;http&#xff1a;/ / / 2 /图书馆/ functions.html docs.python.org #开放open(name[, mode[, buffering]])上面的文档应该提醒说"可选参数文件缓冲的缓冲所需的缓冲区大小&#xff1a;0均值&#xff0c;均值线1具有积极的价值&#xff0c;任何其他…

keep行走和计步_‎App Store 上的“Keep - 跑步健身计步瑜伽”

【Keep - App Store 年度精选 App】【App Store 官方推荐的移动健身工具】在「Keep」&#xff0c;和2亿运动爱好者共同开启健康生活&#xff01;跟随你的移动健身教练&#xff0c;随时随地练就完美身材。健身中经常遇到的问题&#xff1a;- 工作太忙没有时间去健身房&#xff0…

密度图的密度估计_不同类型的二维密度图小教程

R相关小教程链接&#xff1a;用R构建气泡图案例小教程【小教程】散点图、饼图怎么在我的文章中完美展示小教程热图在论文发表中完美呈现小教程R与密度、函数、变量的微妙关系北京市计算中心医用数据库建设解决方案更多内容&#xff0c;请关注“生信会议”公众号Different types…

python 输出纯音频_Python如何录制系统音频(扬声器的输出)?

我从上周就开始找这个了。我也尝试过pyaudio&#xff0c;当我使用它的另一个fork时&#xff0c;系统音频和麦克风音频混合在一起。我找不到任何其他模块来解决这个问题&#xff0c;因此我最终提出了这个问题。在编辑&#xff1a;import pyaudioimport waveCHUNK 1024FORMAT p…

python 读取xml获取包含指定标签的数据_用Python元素提取XML的特定行

我有点困在我正在做的一个项目上&#xff0c;它使用Python——我对它非常陌生。我被告知使用ElementTree并从传入的XML文件中获取指定的数据。听起来很简单&#xff0c;但我不擅长编程。非常低(a&#xff01;)一个传入文件的小例子以及我试图使用的代码。在我想知道下一步该怎么…

Nginx/Tomcat/SpringBoot配置自生成SSL证书

1.配置自生成证书&#xff08;方式一&#xff0c;无需密码&#xff09; 1.1.生成证书 1.下载 nginx windows 版本并解压&#xff0c;这里不过多描述 2.下载 OpenSSL windows 版本并安装&#xff0c;用于生成证书 3.添加 C:\OpenSSL-Win64,C:\nginx-1.16.1 到环境变量 PATH …

python 找质数的个数_用Python打造一款文件搜索工具,所有功能自己定义!

一、前言大家好&#xff0c;又到了Python办公自动化系列。在日常的办公中&#xff0c;我们经常会从一堆不同格式的文件(夹)中搜索特定的文件&#xff0c;可能你是凭着记忆去找或是借助软件&#xff0c;但你有想过如何用Python实现吗&#xff1f;本文将基于几个常见的搜索操作讲…

nessus安装_Nessus忘记密码怎么办?

最近公司购买了Nessus&#xff0c;才安装好&#xff0c;然后隔天密码就忘了&#xff0c;唉&#xff0c;人老了呀&#xff0c;记性不行了。网上看了一下&#xff0c;还是有比较多的同学也遇到这个问题&#xff0c;现将密码重置方法&#xff0c;分享给大家。系统环境:操作系统&am…

python爬取百度域名注册_python爬取百度域名_python爬取百度搜索結果url匯總

寫了兩篇之后&#xff0c;我覺得關於爬蟲&#xff0c;重點還是分析過程分析些什么呢&#xff1a;1)首先明確自己要爬取的目標比如這次我們需要爬取的是使用百度搜索之后所有出來的url結果2)分析手動進行的獲取目標的過程&#xff0c;以便以程序實現比如百度&#xff0c;我們先進…