VUE 学习（四）计算属性computed

最新推荐文章于 2023-05-28 15:01:57 发布

豆皮没有豆

最新推荐文章于 2023-05-28 15:01:57 发布

阅读量174

点赞数 1

分类专栏： HTML+CSS+SVG+VUE 文章标签： vue

本文链接：https://blog.csdn.net/qq_43434300/article/details/108236552

版权

HTML+CSS+SVG+VUE 专栏收录该内容

39 篇文章 4 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>vue学习-计算属性</title>
		<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
	</head>
	<body>
		<!--计算属性关键词: computed。
		计算属性在处理一些复杂逻辑时是很有用的。
		可以看下以下反转字符串的例子：
		例1：-->
		<div id="div1">
			<p>{{message.split('').reverse().join('')}}</p>
		</div>
		<br />
		
		
		<!--实例 1 中模板变的很复杂起来，也不容易看懂理解。
		接下来我们看看使用了计算属性的实例：
		实例2：-->
		<div id="div2">
			<p>原始字符串：{{message}}</p>
			<p>计算后翻转字符串：{{reversemessage}}</p>
		</div>
		<br />
		<!--实例 2 中声明了一个计算属性 reversemessage 。
		提供的函数将用作属性 vm.reversemessage 的 getter 。
		vm.reversemessage 依赖于 vm.message，在 vm.message 发生改变时，vm.reversemessage 也会更新。-->
		
		
		<!--我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。例3： -->
		<div id="div3">
			<p>原始字符串：{{message}}</p>
			<p>计算后反转字符串：{{reversemessage}}</p>
			<p>使用方法后反转字符串：{{reversemessage2}}</p>
		</div>
		<br />
		<!--可以说使用 computed 性能会更好，但是如果你不希望缓存，你可以使用 methods 属性。-->
		
		
		<!--computed 属性默认只有 getter ，不过在需要时你也可以提供一个 setter ： 
		例4：-->
		<div id="div4">
			<p>{{ site }}</p>
		</div>
		<script>
//			例1：
			new Vue({
				el:'#div1',
				data:{
					message:'Hello!'
				}
			})
//			例2：
			var vm=new Vue({
				el:'#div2',
				data:{
					message:'你有女朋友吗？有。你要那玩意儿干啥。你呢？没有。你还是人吗。'
				},
				computed:{
					// 计算属性的 getter
				 	reversemessage:function(){
				 		//this 指向vm实例
				 		return this.message.split('').reverse().join('')
				 	}
				}
			})
//			例3：
			var ve=new Vue({
				el:'#div3',
				data:{
					message:'你有女朋友吗？有。你要那玩意儿干啥。你呢？没有。你还是人吗。'
				},
				computed:{
					// 计算属性的 getter
				 	reversemessage:function(){
				 		//this 指向ve实例
				 		return this.message.split('').reverse().join('')
				 	}
				},
				methods:{
					reversemessage2:function(){
						return this.message.split('').reverse().join('')
					}
				}
			})
//			例4：
			var vu=new Vue({
				el:'#div4',
				data:{
					name:'Google',
					url:'www.google.com'
				},
				computed:{
					site:{
						//getter
						get:function(){
							return this.name+' '+this.url
						},
						//setter
						set:function(newValue){
							var names=newValue.split(' ')
							this.name=names[0]
							this.url=names[names.length-1]
						}
					}
				}
			})
			// 调用 setter， vu.name 和 vu.url 也会被对应更新
			vu.site="菜鸟教程 http://www.runoob.com";
			document.write('name: ' + vu.name);
			document.write('<br>');
			document.write('url: ' + vu.url);
//			从实例运行结果看在运行 vu.site = '菜鸟教程 http://www.runoob.com'; 时，setter 会被调用， vu.name 和 vu.url 也会被对应更新。
		</script>
	</body>
</html>

豆皮没有豆

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
VUE 学习（四）计算属性computed

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>vue学习-计算属性</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> </head> <body> <!--计算属性关键词: .
复制链接

扫一扫