Vue计算属性
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>計算屬性</title><script src="js/vue.js"></script></head><body><div id="app"><p>原始字符串: {{ message }}</p><p>計算后反轉字符串: {{ reversedMessage }}</p><p>{{site}}</p></div><script>var vm = new Vue({el: '#app',data: {message: 'Runoob!',name:'Google',url:'http://www.google.com'},computed: {// 計算屬性的 getterreversedMessage: function() {// `this` 指向 vm 實例return this.message.split('').reverse().join('')},//computed 屬性默認只有 getter ，不過在需要時你也可以提供一個 setter ：site:{// getterget:function(){return this.name + ' ' + this.url},// setterset: function(newValue){var names = newValue.split(' ')this.name = names[0]this.url = names[names.length - 1]}}}})// 調用 setter， vm.name 和 vm.url 也會被對應更新vm.site='菜鳥教程 http://www.runoob.com';document.write('name:'+vm.name);document.write('<br />');document.write('url:'+vm.url);</script></body>
</html>
總結
