vue---计算属性

姓名案例

在这里插入图片描述

1.使用插值语法实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>姓名案例_插值语法实现</title>
		<!-- 引入Vue -->
		<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>{{firstName}}-{{lastName}}</span>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		new Vue({
			el:'#root',
			data:{
				firstName:'张',
				lastName:'三'
			}
		})
	</script>
</html>

2.methods实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>姓名案例_methods实现</title>
		<!-- 引入Vue -->
		<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>
			<!-- data中的任何一个数据改变后,vue会重新解析模板 -->
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		new Vue({
			el:'#root',
			data:{
				firstName:'张',
				lastName:'三'
			},
			methods: {
				fullName(){
					console.log('@---fullName')
					return this.firstName + '-' + this.lastName
				}
			},
		})
	</script>
</html>

3.计算属性实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>姓名案例_计算属性实现</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
			计算属性:
					1.定义:要用的属性不存在,要通过已有属性计算得来。
					2.原理:底层借助了Objcet.defineproperty方法提供的getter和setter。
					3.get函数什么时候执行?
								(1).初次读取时会执行一次。
								(2).当依赖的数据发生改变时会被再次调用。
					4.优势:与methods实现相比,内部有缓存机制(复用),效率更高,调试方便。
					5.备注:
							1.计算属性最终会出现在vm上,直接读取使用即可。
							2.如果计算属性要被修改,那必须写set函数去响应修改,且set中要引起计算时依赖的数据发生改变。
		 -->
		<!-- 准备好一个容器-->
		<div id="root">
			姓:<input type="text" v-model="firstName"> <br/><br/>
			名:<input type="text" v-model="lastName"> <br/><br/>
			测试:<input type="text" v-model="x"> <br/><br/>
			全名:<span>{{fullName}}</span> <br/><br/>
			<!-- 全名:<span>{{fullName}}</span> <br/><br/>
			全名:<span>{{fullName}}</span> <br/><br/>
			全名:<span>{{fullName}}</span> -->
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		const vm = new Vue({
			el:'#root',
			data:{
				firstName:'张',
				lastName:'三',
				x:'你好'
			},
			methods: {
				demo(){
					
				}
			},
			computed:{
				fullName:{
					//get有什么作用?当有人读取fullName时,get就会被调用,且返回值就作为fullName的值
					//get什么时候调用?1.初次读取fullName时。2.所依赖的数据发生变化时。
					get(){
						console.log('get被调用了')
						// console.log(this) //此处的this是vm
						return this.firstName + '-' + this.lastName
					},
					//set什么时候调用? 当fullName被修改时。
					set(value){
						console.log('set',value)
						const arr = value.split('-')
						this.firstName = arr[0]
						this.lastName = arr[1]
					}
				}
			}
		})
	</script>
</html>

4.计算属性实现原理以及特点

  1. 定义:要用的属性不存在,要通过已有属性计算得来。
  2. 原理:底层借助了Objcet.defineproperty方法提供的getter和setter。
  3. get函数什么时候执行?
    (1).初次读取时会执行一次。
    (2).当依赖的数据发生改变时会被再次调用。
  4. 优势:与methods实现相比,内部有缓存机制(复用),效率更高,调试方便。
  5. 简写形式(计算属性只能读取,不可修改)
computed:{
		fullName(){
			console.log('get被调用了')
			return this.firstName + '-' + this.lastName
		}
	}

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

5.用watch实现案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>姓名案例_watch实现</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				computed和watch之间的区别:
						1.computed能完成的功能,watch都可以完成。
						2.watch能完成的功能,computed不一定能完成,例如:watch可以进行异步操作。
				两个重要的小原则:
							1.所被Vue管理的函数,最好写成普通函数,这样this的指向才是vm 或 组件实例对象。
							2.所有不被Vue所管理的函数(定时器的回调函数、ajax的回调函数等、Promise的回调函数),最好写成箭头函数,
								这样this的指向才是vm 或 组件实例对象。
		-->
		<!-- 准备好一个容器-->
		<div id="root">
			姓:<input type="text" v-model="firstName"> <br/><br/>
			名:<input type="text" v-model="lastName"> <br/><br/>
			全名:<span>{{fullName}}</span> <br/><br/>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		const vm = new Vue({
			el:'#root',
			data:{
				firstName:'张',
				lastName:'三',
				fullName:'张-三'
			},
			watch:{
				firstName(val){
					setTimeout(()=>{
						console.log(this)
						this.fullName = val + '-' + this.lastName
					},1000);
				},
				lastName(val){
					this.fullName = this.firstName + '-' + val
				}
			}
		})
	</script>
</html>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

被这批B端界面的颜值给征服了,匍匐拜倒。。

高颜值的 B 端界面对于企业来说具有非常重要的作用&#xff0c;可以帮助企业提升品牌形象、吸引客户、增加用户留存、提升竞争力、提高交易转化率&#xff0c;以及优化用户体验&#xff0c;从而为企业带来更多的商业机会和利益。本期分享一批&#xff0c;都是颜值杠杠的。

制造业信息安全实践——企业信息安全运营规划

前言 制造业作为一个庞大的传统产业&#xff0c;涵盖了汽车、船舶、飞机、家电、新能源等众多领域。当前&#xff0c;无论是国内还是国外的制造业都面临着一个共同的挑战&#xff1a;在计算机和信息时代的背景下&#xff0c;如何跟上IT技术的发展步伐&#xff1f;如何让传统产…

网络协议安全:OSI七层模型分层及作用,数据封装与解封过程,数据传输过程。

「作者简介」&#xff1a;2022年北京冬奥会中国代表队&#xff0c;CSDN Top100&#xff0c;学习更多干货&#xff0c;请关注专栏《网络安全自学教程》 这一章节我们需要知道OSI分哪七层&#xff0c;每层的作用&#xff0c;知道数据在七层模型中是怎样传输的&#xff0c;封包和解…

【离婚不再难】告别痛苦,用一纸起诉状重新启航

【离婚不再难】告别痛苦&#xff0c;用一纸起诉状重新启航 在这个瞬息万变的时代&#xff0c;婚姻关系的走向已不再是人们心中永恒的定局。当缘尽人散&#xff0c;面对离婚的纷扰&#xff0c;你是否感到迷茫与无助&#xff1f;别担心&#xff0c;李秘书讲写作公众号在这里&…

C++11——线程库的理解与使用

目录 前言 一、线程库的构造 1.默认构造 2.带参构造 3.拷贝构造与赋值拷贝&#xff08;不支持&#xff09; 4.移动构造 二、线程调用lambda函数 三、线程安全与锁 1.lambda中的线程与锁 2.函数指针中的线程与锁 3.trylock() 4.recursive_mutex 5.lock_gurad守卫锁…

​「Python大数据」VOC数据清洗

前言 本文主要介绍通过python实现数据清洗、脚本开发、办公自动化。读取voc数据,存储新清洗后的voc数据数据。 一、业务逻辑 读取voc数据采集的数据批处理,使用jieba进行分词,去除停用词,清洗后的评论存储到新的列中保存清洗后的数据到新的Excel文件中二、具体产出 三、执…

three.js(2):渲染第一个three.js三维对象

这一章渲染一个立方体对象到场景中&#xff0c;效果如下&#xff1a; 代码如下&#xff1a; <!DOCTYPE html> <html><head><meta charset"utf-8" /><title></title><script text"module" charset"UTF-8"…

LabVIEW学习记录2 - MySQL数据库连接与操作

LabVIEW学习记录2 - MySQL数据库连接与操作 一、前期准备1.1 windows下安装MySQL的ODBC驱动 二、LabVIEW创建MySQL 的UDL文件三、LabVIEW使用UDL文件进行MySQL数据库操作3.1 建立与数据库的连接&#xff1a;DB Tools Open Connection.vi3.2 断开与数据库的连接&#xff1a;DB T…

功能测试前景揭秘:会被淘汰吗?

在当今快速发展的信息时代&#xff0c;软件已经成为我们工作、学习乃至生活中不可或缺的一部分。随着技术的不断进步和应用的广泛普及&#xff0c;软件测试作为保障软件质量和功能实现的关键步骤&#xff0c;其职业发展路径也受到了广泛的关注。特别是针对功能测试这一细分领域…

The layered MVP architecture in Acise

Acise是一款CAx软件开发平台&#xff0c;本文给出Acise中的MVP架构模式的实现思路。 注1&#xff1a;文章内容会不定期更新。 MVP Data Model View Model 参考文献 Erich Gamma. Design Patterns:elements of reusable object-oriented software. Addison Wesley, 1994.Josep…

高达27K star!基于LLM构建本地智能知识库 太猛了

觉得搞一个AI的智能问答知识库很难吗&#xff1f;那是你没有找对方向和工具&#xff0c; 今天我们分享一个开源项目&#xff0c;帮助你快速构建基于Langchain 和LLM 的本地知识库问答&#xff0c;在GitHub已经获得27K star&#xff0c;它就是&#xff1a;Langchain-Chatchat L…

摄影的技术和艺术,摄影师的日常修养

一、资料描述 本套摄影师资料&#xff0c;大小1.50G&#xff0c;共有67个文件。 二、资料目录 《1900&#xff0c;美国摄影师的中国照片日记》.pdf 《40幅引人入胜的获奖照片》.pdf 《把你的照片换成钱&#xff1a;图片库摄影师的生存之道》(美)陈小波.扫描版.PDF 《半小…

OceanBase数据库日常运维快速上手

这里为大家汇总了从租户创建、连接数据库&#xff0c;到数据库的备份、归档、资源配置调整等&#xff0c;在OceanBase数据库日常运维中的操作指南。 创建租户 方法一&#xff1a;通过OCP 创建 确认可分配资源 想要了解具体可分配的内存量&#xff0c;可以通过【资源管理】功…

百度最新AI旋转验证码

一、简介 先来说说百度旋转验证码的历史。 1、百度旋转验证码 这是百度最早的旋转验证码&#xff0c;只有有限的数量&#xff0c;图片以风景为主&#xff0c;没有随机阴影&#xff0c;没有干扰线条等。所以这种验证码识别比较简单&#xff0c;正确率在99%左右。如下图所示 2…

卸载微软的浏览器: Edge

前言&#xff1a; Edge 崩溃了&#xff0c;无法访问网路&#xff1a; 错误代码: STATUS_STACK_BUFFER_OVERRUN 然后&#xff0c;windows不提供卸载&#xff0c;这下好了&#xff0c;它不能用&#xff0c;你也不能卸载&#xff0c;重新安装也无法解决&#xff0c;咋办&#xff…

hadoop编程之词频统计

数据集实例 java代码&#xff0c;编程 实例 我们要先创建三个类分别为WordCoutMain、WordCoutMapper、WordCoutReducer这三个类 对应的代码如下 WordCoutMain import java.io.IOException; import org.apache.hadoop.conf.Configuration; import org.apache.hadoop.fs.Pat…

亚马逊---设计安全架构

会从以下三个方面展开&#xff1a; 1、AWS资源访问安全 2、应用程序负载的网络安全 3、云中数据的安全 责任共担模式 就像租房子&#xff08;房东和你的责任&#xff09; AWS资源访问安全 需要掌握以下几点&#xff1a; 1、跨多个账户的访问控制和管理 2、AWS联合访问和身份服…

买了个三星i9300(S3)供以后给黑莓Q10开发软件用(安卓4.3)

买了个三星i9300(S3)供以后给黑莓Q10开发软件用(安卓4.3) 前段时间的时候一心想给黑莓Q10开发个软件用用&#xff0c;开发到一半因为过程太过繁琐才叫停了。 一、黑莓Q10安卓应用开发为什么繁琐&#xff1f; Q10的开发过程是这样的&#xff1a; 因为黑莓Q10 里面运行的是Andr…

深度学习之视觉特征提取器——VGG系列

VGG 提出论文&#xff1a;1409.1556.pdf (arxiv.org) 引入 距离VGG网络的提出已经约十年&#xff0c;很难想象在深度学习高速发展的今天&#xff0c;一个模型能够历经十年而不衰。虽然如今已经有VGG的大量替代品&#xff0c;但是笔者研究的一些领域仍然有大量工作选择使用VG…

layabox手游全面屏、ipad屏幕适配方案

1设置 手游平台在项目设置中&#xff0c;场景适配模式选择”固定宽模式 fixedwidth“&#xff0c;设计宽度以全面屏比例为主&#xff0c;我这里设置的设计宽高为640 * 1386 2代码和场景 laya的UI面板有三种类型&#xff0c;分别是Scene、View和Dialog 1&#xff09;Scene和V…