【Vue核心】8.计算属性

news2024/12/23 16:41:35

1. 定义:

要用的属性不存在,要通过已有属性计算得来。

2. 原理

底层借助了objcet.defineproperty方法提供的getter fllsetter.

3. get两数什么时候执行?

(1),初次读取时会执行一次。
(2),当依赖的数据发生改变时会被再次调用。

4. 优势

与methods实现相比,内部有缓存机制(复用),效率更高,调试方便。

5. 备注

1,计算属性最终会出现在vm上,直接读取使用即可。
2.如果计算属性要被修改,那必须写set所数去响应修改,Hset中要引起计算时依赖的数据发生改变。

6. 完整写法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计算属性</title>
		<!-- 引入vue.js -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器 -->
		<div id="root">
			姓:<input type="text" v-model="firstName"> <br /><br />
			名:<input type="text" v-model="lastName"> <br /><br />
			姓名:<span>{{fullName()}}</span>
			姓名:<span>{{fullName()}}</span>
			姓名:<span>{{fullName1}}</span>
			姓名:<span>{{fullName1}}</span>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false;
		new Vue({
			el: '#root',
			data: {
				firstName: "张",
				lastName: "三",
				//fullName: ""
			},
			computed: {

				//get有什么作用?
				//当有人读取fullNamell, get就会被调用,且返回值就作为fullName的值
				//get什么时候调用?1.初次读取fullName时.2.所依赖的数据发生变化时
        
				fullName1: {
          
					get() {
						console.log("get被调用了")
						return this.firstName + "-" + this.lastName;
					},
					set(value) {
						console.log("set", value)
						const arr = value.split('-');
						this.firstName = arr[0];
						this.lastName = arr[1];
					}
				},

		
			},
			methods: {
				fullName() {
					console.log("methods")
					return this.firstName + "-" + this.lastName;
				}
			},

		})
	</script>
</html>

7. 简写方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计算属性</title>
		<!-- 引入vue.js -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器 -->
		<div id="root">
			姓:<input type="text" v-model="firstName"> <br /><br />
			名:<input type="text" v-model="lastName"> <br /><br />
			姓名:<span>{{fullName}}</span>
			姓名:<span>{{fullName}}</span>
		</div>
	</body>
	<script type="text/javascript">
		Vue.config.productionTip = false;

		new Vue({
			el: '#root',
			data: {
				firstName: "张",
				lastName: "三",
			},
			computed: {
				//简写
				fullName() {
					return this.firstName
				}
			},
		
		})
	</script>
</html>

效果:
在这里插入图片描述

计算属性-computed

  1. 要显示的数据不存在,要通过计算得来。

  2. 在computed 对象中定义计算属性。

  3. 在页面中使用{{方法名}}来显示计算的结果。

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

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

相关文章

进厂手册:Git 学习笔记(详解命令)

文章目录git 对象通过git对象进行文件的保存git对象的缺点树对象构建树对象提交对象高层命令工作区的文件状态git reset hard 咋用以及用错了怎么恢复git checkout vs git resetGit存储后悔药工作区暂存区版本库reset三部曲checkout深入理解tag远程上的相关操作ssh登入一些个人…

[附源码]计算机毕业设计家庭整理服务管理系统Springboot程序

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…

LeetCode刷题复盘笔记—一文搞懂动态规划之213. 打家劫舍 II问题(动态规划系列第十八篇)

今日主要总结一下动态规划完全背包的一道题目&#xff0c;213. 打家劫舍 II 题目&#xff1a;213. 打家劫舍 II Leetcode题目地址 题目描述&#xff1a; 你是一个专业的小偷&#xff0c;计划偷窃沿街的房屋&#xff0c;每间房内都藏有一定的现金。这个地方所有的房屋都 围成一…

快速排序详解

快速排序&#xff0c;简称快排。其实看快速排序的名字就知道它肯定是一个很牛的排序&#xff0c;C语言中的qsort和C中的sort底层都是快排。 快速排序由于排序效率在同为O(N*logN)的几种排序方法中效率较高&#xff0c;因此经常被采用&#xff0c;再加上快速排序思想----分治法…

Opencv 基本操作五 各种连通域处理方法

在深度学习中&#xff0c;尤其是语义分割模型部署的结果后处理中&#xff0c;离不开各类形态学处理方法&#xff0c;其中以连通域处理为主&#xff1b;同时在一些传统的图像处理算法中&#xff0c;也需要一些形态学、连通域处理方法。为此&#xff0c;整理了一些常用的连通域处…

leetcode每日一题寒假版:1691. 堆叠长方体的最大高度 (hard)( 换了皮的最长递增子序列)

2022-12-10 1691. 堆叠长方体的最大高度 (hard) &#x1f6a9; 学如逆水行舟&#xff0c;不进则退。 —— 《增广贤文》 题目描述&#xff1a; 给你 n 个长方体 cuboids &#xff0c;其中第 i 个长方体的长宽高表示为 cuboids[i] [width(i), length(i), height(i)]&#xf…

Docker补充知识点--自定义网络实现直连容器

前面介绍docker镜像的秘密这篇知识点的时候&#xff0c;https://blog.csdn.net/dudadudadd/article/details/128200522&#xff0c;提到了docker容器也有属于自己的IP的概念&#xff0c;默认的Docker容器是采用的是bridge网络模式。并且提到了一嘴自定义网卡配置&#xff0c;本…

java基于Springboot的健身房课程预约平台-计算机毕业设计

项目介绍 开发语言&#xff1a;Java 框架&#xff1a;springboot JDK版本&#xff1a;JDK1.8 服务器&#xff1a;tomcat7 数据库&#xff1a;mysql 数据库工具&#xff1a;Navicat11 开发软件&#xff1a;eclipse/myeclipse/idea Maven包&#xff1a;Maven 本健身网站系统是针…

Unity纹理优化:缩小包体

Android打包apk大小约&#xff1a;475M 查看打包日志&#xff1a;Console→Open Editor Log; 或者依赖第三方插件&#xff1a;build reports tool&#xff08;在unity store里可以下载&#xff09;&#xff1b; 定位问题 经过排查后&#xff0c;发现项目中纹理占比很高&#…

分布式能源的不确定性——风速测试(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️❤️&#x1f4a5;&#x1f4a5;&#x1f4a5;&#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清…

(6)Pytorch数据处理

Pytorch 数据处理 要点总结 1、功能 Dataset&#xff1a;准备数据集&#xff0c;一般会针对自己的数据集格式重写Dataset&#xff0c;定义数据输入输出格式 Dataloader&#xff1a;用于加载数据&#xff0c;通常不用改这部分内容 2、看代码时请关注 Dataloader中collate_fn 传入…

【云原生】K8s Ingress rewrite与TCP四层转发讲解与实战操作

文章目录一、背景二、K8s Ingress安装三、K8s Ingress rewrite 讲解与使用1&#xff09;配置说明2&#xff09;示例演示1、部署应用2、配置ingress rewrite转发&#xff08;http&#xff09;3、配置ingress rewrite转发&#xff08;https&#xff09;【1】创建证书&#xff08;…

音视频- iOS图像采集

本文主要总结一下&#xff0c;如何使用AVFoundation的功能来实现图像的采集&#xff0c;主要用到了AVFoundation中的一些类&#xff0c;采集的结构如下图&#xff0c;引用自iOS开发者官网&#xff1a; AVCaptureSession 采集会话&#xff0c;其主要功能从整体上来掌管图像采集的…

MOSFET 和 IGBT 栅极驱动器电路的基本原理学习笔记(五)交流耦合栅极驱动电路

交流耦合栅极驱动电路 1.计算耦合电容 2.耦合电容器的启动瞬变 3.总结 栅极驱动路径中的交流耦合可为栅极驱动信号提供简单的电平位移。交流耦合的主要作用是修改主MOSFET 的开通和关断栅极电压&#xff0c;而高侧栅极驱动则不同&#xff0c;它最需要关注的是缩小较大的电势差…

软件安全测试-web安全测试基础

目录 1. Web安全的测试范围 2.Web安全的四要素 3. Web安全的分类 4. Web安全的类别排名​ 5. 零时差攻击 6. Web安全的载体 7. 了解软件安全测试相关的Cooike&#xff0c;Session&#xff0c;Token 7.1 会话级鉴权及认证技术 7.2 会话安全管理需要授权和鉴权两个步骤 …

单例模式(史上最全)

文章很长&#xff0c;而且持续更新&#xff0c;建议收藏起来&#xff0c;慢慢读&#xff01;疯狂创客圈总目录 博客园版 为您奉上珍贵的学习资源 &#xff1a; 免费赠送 :《尼恩Java面试宝典》 持续更新 史上最全 面试必备 2000页 面试必备 大厂必备 涨薪必备 免费赠送 经典…

0121 动态规划 Day10

剑指 Offer 46. 把数字翻译成字符串 给定一个数字&#xff0c;我们按照如下规则把它翻译为字符串&#xff1a;0 翻译成 “a” &#xff0c;1 翻译成 “b”&#xff0c;……&#xff0c;11 翻译成 “l”&#xff0c;……&#xff0c;25 翻译成 “z”。一个数字可能有多个翻译。…

Python——翻转字符串

题目介绍 以空格为分割&#xff0c;将字符串中的每个单词的字母位置不变&#xff0c;单词顺序从后往前翻转 例如&#xff1a;I am a student. 变成&#xff1a;student. a am I Python中的标准库是为了提高程序员开发效率&#xff0c;减少学习成本&#xff0c;而设计的一系列方…

spring——Spring Bean定义

在 XML 配置的<beans> 元素中可以包含多个属性或子元素&#xff0c;常用的属性或子元素如下表所示。 属性名称描述idBean 的唯一标识符&#xff0c;Spring IoC 容器对 Bean 的配置和管理都通过该属性完成。id 的值必须以字母开始&#xff0c;可以使用字母、数字、下划线等…

SpringCloud Gateway网关的使用与介绍

目录 1. gateway简介 1.1 是什么 1.2 作用 1.3 主要特征 1.4 与zuul的主要区别 1.5 主要组件 1.6 架构图 2. 开发示例 2.1 创建一个gateway模块 2.2 与nacos结合使用 2.2.1 默认规则 2.2.2 通过配置文件配置路由 2.2.3 动态路由 1. gateway简介 1.1 是什么 Spri…