012_Vue计算属性

最新推荐文章于 2025-04-10 17:04:31 发布

自由与束缚JavaJavaScript

最新推荐文章于 2025-04-10 17:04:31 发布

阅读量73

点赞数

分类专栏： vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/aihiao/article/details/122880446

版权

vue 专栏收录该内容

36 篇文章

订阅专栏

本文介绍了Vue.js中计算属性的使用，强调了其在简化模板逻辑和提供缓存的优势。通过示例展示了如何创建计算属性，如反转字符串和数值求和，解释了计算属性在模板中动态更新数据的原理，并通过对比方法调用，突显了计算属性的缓存特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 为何需要计算属性?

1.1. 表达式的计算逻辑可能会比较复杂, 使用计算属性可以使模板内容更加简洁。

1.2. 计算属性用法

computed: {
	reverseString: function(){
		return this.msg.split('').reverse().join('');
	}
}

1.3. 计算属性有缓存。

2. 计算属性例子

2.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>计算属性</title>
	</head>
	<body>
		<div id="app">
			<div>{{msg}}</div><hr />

			<div>计算属性:</div>
			<div>{{reverseString}}</div>
			<div>{{reverseString}}</div><hr />
			
			<div>方法:</div>
			<div>{{reverseMethod()}}</div>
			<div>{{reverseMethod()}}</div><hr />

			<div>求和:</div>
			<div>{{sum}}</div>
		</div>
		
		<script type="text/javascript" src="vue.min.js"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el: "#app",
				data: {
					msg: 'Nihao',
					num: 100
				},
				methods: {
					reverseMethod: function(){
        				console.log("方法没有缓存");
          				return this.msg.split('').reverse().join('');
        			}
				},
				computed: {
        			reverseString: function(){
        				console.log("计算属性有缓存");
          				return this.msg.split('').reverse().join('');
        			},
        			sum: function(){
        				// 比较耗时的操作可以使用计算属性
        				var total = 0;
        				for(var i = 0; i <= this.num; i++){
        					total += i;
        				}
        				return total;
        			}
      			}
			});
		</script>
	</body>
</html>

2.2. 效果图