Vue从入门到实战:定义计算属性

来自CloudWiki
Cloud17讨论 | 贡献2021年2月8日 (一) 01:49的版本 (创建页面,内容为“==背景介绍== 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难…”)
(差异) ←上一版本 | 最后版本 (差异) | 下一版本→ (差异)
跳转至: 导航搜索

背景介绍

模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如:

<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

在这个地方,模板不再是简单的声明式逻辑。你必须看一段时间才能意识到,这里是想要显示变量 message 的翻转字符串。当你想要在模板中的多处包含此翻转字符串时,就会更加难以处理。所以,对于任何复杂逻辑,你都应当使用计算属性。

定义计算属性

表达式的逻辑过于复杂的时候,都应当考虑使用计算属性。计算属性是以函数形式,在Vue实例的选项对象的compute选项中定义。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>计算属性</title>
	</head>
	<body>
		<div id="app">
		  <p>原始字符串: {{ message }}</p>
		  <p>计算后的反转字符串: {{ reversedMessage }}</p>
		</div>
	
		<script src="vue.js"></script>
		<script>
			var vm = new Vue({
			  el: '#app',
			  data: {
			    message: 'Hello,Vue.js无难事!'
			  },
			  computed: {
			  	// 计算属性的 getter
			    reversedMessage: function () {
			      return this.message.split('').reverse().join('')
			    }
			  }
			})
		</script>
	</body>
</html>