模板內的表達式是非常便利的，但是它們實際上只用于簡單的運算。在模板中放入太多的邏輯會讓模板過重且難以維護。這時候需要使用到vue的計算屬性computed。

文件目錄結構如下：利用vue腳手架創建

這里實現將一個字符串進行翻轉的功能：

其中HTML是負責顯示，reverse.vue文件是自定義的vue模板，main.js文件是我們的啟動入口文件。

需要注意的是：data（）方法不能改為data屬性。其中的區別請參看這里：

Vue2 實例中的 data 屬性三種寫法與作用

data（）方法類似于Java中的setter方法，為其中的message屬性賦值

在reverse模板中我們聲明了一個計算屬性?reversedMessage。我們提供的函數將用作屬性vm.reversedMessage?的 getter 函數：

總結

以上是生活随笔為你收集整理的vue的computed计算属性学习的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。