在模板中绑定表达式是非常便利的,但是它们实际上只用于简单的操作。
如果在数据绑定中出现大量的表达式会让模版过重,不便维护,这个时候需要使用 vue 中的计算特性

export

{{ number1 }} + {{ number2 }} = {{ number1 + number2 }}

source

<div id="app">
	<span>
		{{ number1 }} + {{ number2 }} = {{ number1 + number2 }}
	</span>
</div>
var app = new Vue({
  el: '#app',
  data: {
	number1 : 1,
	number2: 2
  }
});
从上面可以看到在数据绑定中可以使用表达式,对一个数据的计算结果直接做数据处理。

export

{{ "hello " + text}}

source

<div id="app2">
	<span>
		{{ "hello  " + text}}
	</span>
</div>
var app = new Vue({
  el: '#app2',
  data: {
	text : "vue.js"
  }
});
遇到这类情况我们可以使用表达式来做处理

computed

export

{{ context }}

source

<div id="app3">
	<span>
		{{ context }}
	</span>
</div>
var app = new Vue({
  el: '#app3',
  data: {
	text : "vue.js"
  },
  computed: {
    context: function () {
		//注意的是这里不要出现数据递归操作
		return "hello  " + this.text;
    }
  }
});
computed 其实是对数据的封装,当数据发生 get 动作时触发
上面例子中当表达式中的 text 发生读取数据时触发 computed 中对应的函数,在函数中做数据操作并返回。

数据递归

<div id="app">
	<span>
		{{ text }}
	</span>
</div>

var app = new Vue({
  el: '#app',
  data: {
	text : "vue.js"
  },
  computed: {
  	//监听 text 的数据
    text: function () {
    	//这里获取的数据又是自身监听的对象,就会出现递归操作,死循环
		return "hello  " + this.text;
    }
  }
});

getter / setter

上面的例子中看到了数据 get 的动作,那么相应的也有 set
var app = new Vue({
  el: '#app',
  data: {
	text : "vue.js"
  },
  computed: {
  	//监听 text 的数据
    text: {
    	//getter
    	get : function(){

    	},
    	//setter
    	set : function(){

    	}
    }
  }
});