4.Vue.js前端框架：计算属性与监听属性

news/2024/7/9 23:41:51 标签: vue, java, javascript, js, html

4.1 计算属性

4.1.1 什么是计算属性

  • 计算属性需要定义在 computed 选项中。当计算属性依赖的数据发生变化时，这个属性的值会自动更新，所有依赖该属性的数据绑定也会同步进行更新。在一个计算属性里可以实现各种复杂的逻辑，包括运算、函数调用等。示例代码如下：
html">   <div id="demo">
			<p>原字符串:{{str}}</p>
			<p>新字符串:{{newstr}}</p>
   </div>
		   <script type="text/html" title=java>javascript">html" title=java>javascript">
				var demo = new Vue({
					el : '#demo',
					data :{
						str : 'JavaScript*CSS*HTML+Vue.html" title=js>js'
					},
					computed:{
						newstr : function(){
							return this.str.split('*').join('+');//对字符串进行分割并重新连接
						}
					}
			})
			</script>
  • 上述运行代码中定义了一个计算属性 newstr，并在模板中绑定了该计算属性。newstr 属性的值依赖于 str 属性的值。当 str属性的值发生改变时，对应的 newstr 属性的值也会自动更新。运行结果如下图所示。
    在这里插入图片描述

4.1.2 getter 和 setter

  • 每一个计算属性都包含一个 getter 和 setter。当没有指明方法时，默认使用 getter 来读取数据。示例代码如下：
html">   <div id="demo">
			<p>连接后的名字:{{fullname}}</p>
   </div>
		   <script type="text/html" title=java>javascript">html" title=java>javascript">
				var demo = new Vue({
					el : '#demo',
					data :{
						first_name : '袁',
						last_name :'晓茗'
					},
					computed:{
						fullname : function(){
							return this.first_name + this.last_name ;//将名字进行连接
						}
					}
			})
			</script>

html">   <div id="demo">
			<p>连接后的名字:{{fullname}}</p>
	</div>
		   <script type="text/html" title=java>javascript">html" title=java>javascript">
				var demo = new Vue({
					el : '#demo',
					data :{
						first_name : '袁',
						last_name :'晓茗'
					},
					computed:{
						fullname : {
							//getter
							get : function(){
								return this.first_name + this.last_name ;//将名字进行连接
							}
						}
					}
			})
			</script>
  • 运行结果如下图所示。
    在这里插入图片描述
  • 除了 getter 之外，还可以设置计算属性的 setter 。getter 用来执行读取的操作，而 setter 用来执行设置值的操作。当手动更新计算属性的值时，就会出发 setter，执行一些自定义操作。示例代码如下：
html">   <div id="demo">
			<p>手动设置（setter）的名字:{{fullname}}</p>
	</div>
		   <script type="text/html" title=java>javascript">html" title=java>javascript">
				var demo = new Vue({
					el : '#demo',
					data :{
						first_name : '袁',
						last_name :'晓茗'
					},
					computed:{
						fullname : {
							//getter
							get : function(){
								return this.first_name + this.last_name ;//将名字进行连接
							},
							//setter
							set : function(value){
								this.first_name =value.substr(0,1);
								this.last_name =value.substr(1,2);
							}
						}
					}
			})
			demo.fullname = '江小白';
			</script>

html">   <div id="demo">
			<p>手动设置（setter）的名字:{{fullname}}</p>
		</div>
		   <script type="text/html" title=java>javascript">
				var demo = new Vue({
					el : '#demo',
					data :{
						first_name : '袁',
						last_name :'晓茗'
					},
					computed:{
						fullname : {
							//getter
							get : function(){
								return this.first_name + this.last_name ;//将名字进行连接
							},
						}
					}
			})
			demo.fullname = '江小白';
  • 上述代码中定义了一个计算属性 fullname，在为其重新赋值时，Vue.html" title=js>js 会自动调用 setter ,并将新值作为参数传递给 set()方法，first_name 属性和 last_nam 属性会相应进行更新，模板中绑定的 fullname 属性的值也会随之更新。如果没有设置 setter 的情况下为计算属性重新赋值，是不会触发模板更新的。运行结果如下所示。
    在这里插入图片描述
    在这里插入图片描述

4.1.3 计算属性缓存

  • 除了使用计算属性外，在表达式中调用方法也可以实现同样的效果。使用方法实现的效果示例代码如下：
html">   <div id="demo">
			<p>姓名:{{fullname()}}</p>
		</div>
		   <script type="text/html" title=java>javascript">html" title=java>javascript">
				var demo = new Vue({
					el : '#demo',
					data :{
						first_name : '袁',
						last_name :'晓茗'
					},
					methods :{
						fullname : function(){
							return this.first_name + this.last_name;
						}
					}
			})
			</script>
  • 运行结果如下图所示。
    在这里插入图片描述
  • 将相同的操作定义为一个方法，或者定义为一个计算属性，两种方式的结果完全相同。但是，不同的是计算属性是基于它们依赖的属性进行缓存的。使用计算属性时，每次获取的值是基于依赖的缓存值。当页面重新渲染时，如果依赖的数据未发生改变，使用计算属性获取的值就一直是缓存值。只有依赖的数据发生改变时才会重新执行 getter。通过一个示例来说明计算属性的缓存。代码如下：
html">   <div id="app">
			<input v-model="message">
			<p>{{message}}</p>
			<p>{{getTimeC}}</p>
			<p>{{getTimeM()}}</p>
		</div>
		   <script type="text/html" title=java>javascript">html" title=java>javascript">
				var demo = new Vue({
					el : '#app',
					data :{
						message :'',
						time :'当前时间:'
					},
					computed :{ //计算属性
						//计算属性的getter
						getTimeC :function(){
							var hour =new Date().getHours();
							var minute =new Date().getMinutes();
							var second =new Date().getSeconds();
							return this.time+ hour +":"+minute +":"+second;
						}
					},
					methods :{ //普通方法
						getTimeM :function(){//获取当前时间
							var hour =new Date().getHours();
							var minute =new Date().getMinutes();
							var second =new Date().getSeconds();
							return this.time+ hour +":"+minute +":"+second;
						}
					}
			})
			</script>

v-model 指令用来在表单元素上创建双向数据绑定

  • 运行上述代码之后，在页面会输出一个文本框，以及分别通过计算属性和方法获取的当前时间，运行结果如下图所示。
    在这里插入图片描述
  • 在文本框输入任意内容后，页面进行了重新渲染，这时，通过计算属性获取的当前时间是缓存时间，而通过方法获取的当前时间是最新的时间，运行结果如下图所示。
    在这里插入图片描述

注意：在上述代码中，getTimeC 计算属性依赖于 time 属性。当页面重新渲染时，只要 time 属性未发生改变，多次访问 getTimeC 计算属性会立即返回之前的计算结果，而不会再次执行函数，因此会输出缓存时间。相比之下，每当触发页面重新渲染时，调用 getTimeM() 方法总是会再次执行函数，因此会输出最新时间。

4.2 监听属性

4.2.1 什么是监听属性

  • 监听属性是 Vue.html" title=js>js 提供的一种用来监听和响应 Vue 实例中的数据变化的方式。在监听数据对象中的属性时，每当监听的属性发生变化，都会执行特定的操作。监听属性可以定义在 watch 选项中，也可以使用实例方法 vm.$watch()。在 watch 选项中定义监听属性的示例代码如下：
html">   <div id="app"></div>
		   <script type="text/html" title=java>javascript">
				var vm= new Vue({
					el : '#app',
					data :{
						fullname :'张三'
					},
					watch:{
						fullname : function(newValue,oldValue){
							alert("原值："+oldValue+"新值："+newValue);
						}
					}
			})
			vm.fullname = '李四';//修改属性值
  • 上述代码中，在 watch 选项中对 fullname 属性进行了监听。当改变该属性值时，会执行对应的回调函数，函数中的两个参数 newValue 和 oldValue 分别表示监听属性的新值和旧值。其中第二个参数可以省略，运行结果如下图所示。
    在这里插入图片描述
  • 使用实例方法 vm.$watch() 定义监听属性的代码如下：
html">  <div id="app"></div>
		   <script type="text/html" title=java>javascript">html" title=java>javascript">
				var vm = new Vue({
					el : '#app',
					data :{
						fullname :'张三'
					},
				})
				vm.$watch ('fullname',function(newValue,oldValue){
					alert("原值："+oldValue+"新值："+newValue);
				});
		    	vm.fullname = '李四';//修改属性值
			</script>
  • 上述代码中，应用实例方法 vm.$watch () 对 fullname 属性进行了监听。运行结果如下图所示。
    在这里插入图片描述

4.2.2 deep 选项

  • 如果要监听的属性值是一个对象，为了监听对象内部值得变化，可以在选项中设置 deep 选项得值为 true。代码如下：

当监听的数据是一个数组或者对象时，回调函数中的新值和旧值是相等的，因为这两个形参指向的是同一个数据对象。

html">   <div id="app"></div>
		   <script type="text/html" title=java>javascript">html" title=java>javascript">
				var vm = new Vue({
					el : '#app',
					data :{
						shop:{
							name : 'HuaWei',
							price : 3299
						}
					},
				watch :{
					shop :{
						handler :function(val){
							alert(val.name + "新价格为"+ val.price +"元");
							},
							deep : true,
						},
					}
				})
				vm.shop.price =2999;//修改对象中得属性值
			</script>
  • 运行结果如下图所示。
    在这里插入图片描述

备注：后期会继续跟进 Vue.html" title=js>js前端框架：样式绑定，希望大家的多多支持和关注。


http://www.niftyadmin.cn/n/1664353.html

相关文章

差分隐私学习总结

差分隐私学习总结

1. 苹果、微软、谷歌与差分隐私的爱恨纠葛 在2016 年6 月份的苹果 WWDC 大会上苹果公司负责软件工程的高级副总裁克雷格•费德里希(Craig Federighi)在WWDC上满脸傲骄地说「We believe you should havegreat features and great privacy」&#xff0c;那个瞬间特别像一个小孩子…
阅读更多...
TCP网络程序实例——服务器端与客户端交互

TCP网络程序实例——服务器端与客户端交互

◆ 服务器端 创建服务器端项目Server&#xff0c;在Main方法中创建TCP连接对象&#xff1b;然后监听客户端接入&#xff0c;并读取接入的客户端IP地址和传入的消息&#xff1b;最后向接入的客户端发送一条信息。代码如下&#xff1a; 01 namespace Server 02 { 03 …
阅读更多...
5.Vue.js前端框架：样式绑定

5.Vue.js前端框架：样式绑定

5.1 class 属性绑定 在样式绑定中&#xff0c;首先是对元素的 class 属性进行绑定&#xff0c;绑定的数据可以是对象或数组。 5.1.1 对象语法 在应用 v-bind 对元素的 class 属性进行绑定时&#xff0c;可以将绑定的数据设置为一个对象&#xff0c;从而动态地切换元素的 cla…
阅读更多...
EntityFramework之摸索EF底层（八）

EntityFramework之摸索EF底层（八）

前言 此篇文章我将深入去摸索edmx中一些不为人知的东西&#xff0c;有时候我们需要知道Code First模型中一些存储以及映射的原理&#xff0c;个人觉得那是必要的也是有用的&#xff0c;因为很有可能SQL会出现一些其他问题&#xff0c;只有掌握了一些必备的原理&#xff0c;这样…
阅读更多...
【数据结构】散列表知识点

【数据结构】散列表知识点

散列存储的特性 散列存储&#xff1a;散列表&#xff0c;采用的存储方式是散列存储。那么何为散列存储呢&#xff1f;散列存储是根据元素的关键字直接计算出该元素的存储地址&#xff0c;又称哈希&#xff08;Hash&#xff09;存储。采用散列存储的方式存储数据时&#xff0c;…
阅读更多...
[日推荐]『钢琴优课』你免费的私人随身钢琴老师

[日推荐]『钢琴优课』你免费的私人随身钢琴老师

2019独角兽企业重金招聘Python工程师标准>>> 小编今天的文艺细胞有点炸&#xff0c;所以看到了这个小程序之后&#xff0c;就迫不及待的想要分享给大家啦&#xff01;没错&#xff0c;这又是一款乐器自学小程序&#xff0c;这次学习的主题是——钢琴。 钢琴优课 **简…
阅读更多...
6.Vue.js前端框架：事件处理

6.Vue.js前端框架：事件处理

1. v-on 事件监听 监听DOM事件使用 v-on 指令。该指令通常在模板中直接使用&#xff0c;在触发事件时会执行一些 JavaScript 代码。 v-on 指令的基本用法 &#xff08;1&#xff09;在 HTML 中使用 v-on 指令&#xff0c;后面可以是所有的原生事件名称。基本用法如下&#x…
阅读更多...
【Linux学习笔记】20：Bash基础-历史命令

【Linux学习笔记】20：Bash基础-历史命令

把操作的记录保存在系统当中&#xff0c;当需要的时候还可以查看和调用&#xff0c;这是一种必要的机制。 最早的Bourne Shell——sh是不支持历史命令的&#xff0c;发展到现在的Bash已经支持的很好了。 [1]history history [选项] [历史命令保存文件] 选项&#xff1a;-c清…
阅读更多...
最新文章

Copyright @ 2022~2023