vue 計算屬性 computed
阿新 • • 發佈：2021-02-11
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> {{name}} <p>{{age}}</p> <p>{{age*2}}</p> <p>{{double}}</p> <button @click="changeAge">changeAge</button> <button @click="changeName">changeName</button> </div> <script> new Vue({ el: '#app', data: { age: 30, name: 'qrx' }, computed: { double(){ console.log('computed') return this.age*2 } }, methods: { changeAge() { this.age++ }, changeName() { this.name = 'QRX' } } }) </script> <!-- computed 計算屬性 可以和 data 裡的資料進行關聯 得到一個新的資料 計算屬性的快取性 只有當關聯的資料發生改變了 才重新計算 無關資料發生改變不重新計算 --> </body> </html>