2021-7-11 Vue的計算屬性
阿新 • • 發佈：2021-07-11
計算屬性是為了讓頁面顯示更加簡潔，基於data資料進行處理的方法，以下為例項
<!DOCTYPE html> <html> <head> <title> </title> </head> <body> <div id="app"> <input type="text" name="" v-model="msg"> {{reverseMsg}} </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"View Code></script> <script type="text/javascript"> //在原生js中使用 var vm=new Vue({ el:'#app', data:{ msg:'' }, computed:{ reverseMsg:function(){ return this.msg.split('').reverse().join('');//split分割，reverse反轉，join拼接 } } }); </script> </body> </html>
計算屬性和方法的區別：
計算屬性是有快取的，只要data資料不發生改變，會直接呼叫上次計算好的值（節省時間，節約效能）
方法則是沒有快取，不管data是否發生改變，都會重新執行一次方法