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

来自CloudWiki
跳转至： 导航， 搜索

背景介绍

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

<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>

我们声明了一个计算属性reversedMessage,给出的函数将用作属性vm.reversed-Message的getter函数

输出： 

原始字符串: Hello，Vue.js无难事!

计算后的反转字符串: !事难无sj.euV，olleH

当message属性的值改变时，reversedMessage的值也会自动更新，并且会自动更新DOM部分。

计算属性默认只有getter，因此是不能直接修改计算属性的，如果需要也可以提供一个setter. 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>计算属性的getter和setter</title>
	</head>
	<body>
		<div id="app">
		  <p>First name: <input type="text" v-model="firstName"></p>
		  <p>Last name: <input type="text" v-model="lastName"></p>
		  <p>{{ fullName }}</p>
		</div>
	
		<script src="vue.js"></script>
		<script>
			var vm = new Vue({
			  el: '#app',
			  data: {
			    firstName: 'Smith',
			    lastName: "Will"
			  },
			  computed: {
			  	fullName: {
				    // getter
				    get: function () {
				      return this.firstName + ' ' + this.lastName
				    },
				    // setter
				    set: function (newValue) {
				      var names = newValue.split(' ')
				      this.firstName = names[0]
				      this.lastName = names[names.length - 1]
				    }
				  }
			  }
			})
		</script>
	</body>
</html>

在控制台窗口输入vm.fullName = "Mark Twiwn" ，可以看到firstName和lastName的值也同时发生了改变，这是调用fullName的setter函数来实现的。

取自“http://www.openbrains.net/mediawiki/index.php?title=Vue从入门到实战：定义计算属性&oldid=24879”