計算屬性computed · vue

# computed ~~~ computed 計數做一些復雜的操作 ~~~ 模板內的表達式非常便利，但是設計她們的初衷是用于簡單運算的。在模板中放入太多的邏輯會讓模板過眾難以維護計算屬性是基于它們的響應式依賴進行緩存的。只在相關響應式依賴發生改變時他們才會重新求值。methods 不緩存 # 代碼： ~~~ <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <p>{{count+1}}</p> <p>{{msg}}</p> <p>{{upMsg}}</p> </div> </body> </html> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> var vue=new Vue({ el:'#app', data:{ msg:'hello vue', count:0 }, computed:{ //computed 計數做一些復雜的操作 upMsg:function (){ return this.msg.toUpperCase()+'adsfsfsd'; //toUpperCase() 小寫轉大寫 } } }) ~~~ ![](https://img.kancloud.cn/fc/aa/fcaac991717964132fc4c16822ea1698_1099x602.png) ![](https://img.kancloud.cn/1d/1a/1d1a450e2fae6a6b555cb4309644b29c_1343x811.png)