標籤：src strong site charset html join meta run tps
computed屬性
HTML
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Vue 測試執行個體 - 菜鳥教程(runoob.com)</title><script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script></head><body><div id="app"> <p>原始字串: {{ message }}</p> <p>計算後反轉字串: {{ reversedMessage }}</p></div><script>var vm = new Vue({ el: ‘#app‘, data: { message: ‘Runoob!‘ }, computed: { // 計算屬性的 getter reversedMessage: function () { // `this` 指向 vm 執行個體 return this.message.split(‘‘).reverse().join(‘‘) } }})</script></body></html>
效果：
執行個體中聲明了一個計算屬性 reversedMessage 。
提供的函數將用作屬性 vm.reversedMessage 的 getter 。
vm.reversedMessage 依賴於 vm.message，在 vm.message 發生改變時，vm.reversedMessage 也會更新。
computed vs methods
HTML
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Vue 測試執行個體 - 菜鳥教程(runoob.com)</title><script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script></head><body><div id="app"> <p>原始字串: {{ message }}</p> <p>計算後反轉字串: {{ reversedMessage }}</p> <p>使用方法後反轉字串: {{ reversedMessage2() }}</p></div><script>var vm = new Vue({ el: ‘#app‘, data: { message: ‘Runoob!‘ }, computed: { // 計算屬性的 getter reversedMessage: function () { // `this` 指向 vm 執行個體 return this.message.split(‘‘).reverse().join(‘‘) } }, methods: { reversedMessage2: function () { return this.message.split(‘‘).reverse().join(‘‘) } }})</script></body></html>
效果:
可以說使用 computed 效能會更好，但是如果你不希望緩衝，你可以使用 methods 屬性。
computed setter
HTML
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Vue 測試執行個體 - 菜鳥教程(runoob.com)</title><script src="https://unpkg.com/vue/dist/vue.js"></script></head><body><div id="app"> <p>{{ site }}</p></div><script>var vm = new Vue({ el: ‘#app‘, data: { name: ‘Google‘, url: ‘http://www.google.com‘ }, computed: { site: { // getter get: function () { return this.name + ‘ ‘ + this.url }, // setter set: 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>
效果：
從執行個體運行結果看在運行 vm.site = ‘菜鳥教程 http://www.runoob.com‘; 時，setter 會被調用， vm.name 和 vm.url 也會被對應更新。
VueJS計算屬性: computed
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
