vue的計算屬性(官網)

2021-10-11 21:09:33 字數 1260 閱讀 2435

模板內的表示式非常便利,但是設計它們的初衷是用於簡單運算的。在模板中放入太多的邏輯會讓模板過重且難以維護。例如:

}

在這個地方,模板不再是簡單的宣告式邏輯。你必須看一段時間才能意識到,這裡是想要顯示變數 message 的翻轉字串。當你想要在模板中多包含此處的翻轉字串時,就會更加難以處理。

所以,對於任何複雜邏輯,你都應當使用計算屬性

original message: "}"

computed reversed message: "}"

var vm = new vue(,

computed:

}})

結果:

original message: 「hello」

computed reversed message: 「olleh」

這裡我們宣告了乙個計算屬性 reversedmessage。我們提供的函式將用作 property vm.reversedmessage 的 getter 函式:

console.log(vm.reversedmessage) // => 'olleh'

vm.message = 'goodbye'

console.log(vm.reversedmessage) // => 'eybdoog'

你可以開啟瀏覽器的控制台,自行修改例子中的 vm。vm.reversedmessage 的值始終取決於 vm.message 的值。

你可以像繫結普通 property 一樣在模板中繫結計算屬性。vue 知道 vm.reversedmessage 依賴於 vm.message,因此當 vm.message 發生改變時,所有依賴 vm.reversedmessage 的繫結也會更新。而且最妙的是我們已經以宣告的方式建立了這種依賴關係:計算屬性的 getter 函式是沒有*** (side effect) 的,這使它更易於測試和理解。

以上**官網:

其實簡單的來說就是:

下面是用於專案中的,主要是為了判斷是否達到要求。

我這裡主要用於是否顯示隱藏。v-if=「officeemployee」

以上僅作為自己的記錄,希望一起加油。前端之路需要我們一起走下去。

vue官網學習(一)

一直聽說vue.js的學習一定要通過官網來學習,個人雖然接觸過vue專案,對於官網還是比較陌生,所以今天開始對官網進行乙個初步的學習,後期準備看完之後,整理出來乙個比較清晰的目錄出來,供大家學習,希望大家持續關注我的部落格,謝謝!如果有不對的地方,希望大家能夠指正 一 安裝 1.vue.js相容所有...

Vue官網教程 條件渲染

通過v if展示乙個dom是否顯示 改為false就不會顯示了 可以使用else的。改變ok的值為false,注意這個false是沒有 引號的,帶引號的是字串,沒效果的 因為v if只能改變自己的dom,如果想改變好幾個標籤要怎麼辦?可以使用template v else 要緊跟在v if v el...

Vue的計算屬性

vue模板 可以用來展示一些資料,但是遇到資料的邏輯比較複雜的時候,此時要怎麼辦呢?這個時候就會用到vue的計算屬性 基本用法 計算屬性也是用來儲存資料的,常用於邏輯比較複雜的計算但有著一下幾個特點 a 所有的計算屬性一般以函式的形式寫在vue例項的computed選項中的,並最終返回計算後的結果。...