Vue計算屬性的用法

2022-04-06 08:15:49 字數 1760 閱讀 1463

計算屬性是個很好玩的東西,在這裡面可以對資料模型進行操作,·也可以使用getter,setter方法。使用的話也是非常的簡潔明瞭

這裡寫個例子

doctype html

>

<

html

lang

="en"

>

<

head

>

<

meta

charset

="utf-8"

>

<

title

>title

title

>

<

script

src="vue.min.js"

>

script

>

head

>

<

body

>

<

div

id>

總價:}

div>

<

script

>

var=

newvue(,

],package2:[

,]},

computed:

for(

vari=0

;i<

this

.package2.length;i++)

return

prices;}}

})script

>

body

>

html

>

在computed屬性裡面定義乙個計算price的方法,然後對data裡面的東西進行操作

下面看一下執行結果:

然後再看一下如何使用getter、setter方法:

doctype html

>

<

html

lang

="en"

>

<

head

>

<

meta

charset

="utf-8"

>

<

title

>title

title

>

<

script

src="js/vue.js"

>

script

>

head

>

<

body

>

<

div

id>

姓名:}

div>

<

script

>

var=

newvue(,

computed:,

//setter

set:

function

(newvalue) }}

})script

>

body

>

html

>

展現出來的效果是這樣的

也是比較簡單的用法,在購物模型裡面還有金融計算類的應用裡面應該用的比較多這個屬性

VUE 計算屬性的用法

計算屬性在處理一些複雜邏輯時是很有用的。說明 1 本來上面的 可以寫成 通過計算屬性處理後,會變得簡單 2 通過計算屬性,可以讓模板變得更清晰 簡單 3 一些複雜的,需要邏輯處理 計算出來的,可以採用計算屬性 說明 1 乙個簡單點計算屬性例子 我們可以使用 methods 來替代 computed,...

Vue的計算屬性

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

VUE的計算屬性

二 computed的特性?總結computed 是計算乙個新的屬性,並將該屬性掛載到 vue 例項上 computed屬性主要是解決專案中的計算問題 如下 示例 new vue computed script 上面我們建立了乙個計算屬性,來看一下它的語法結構。computed存在於乙個vue例項中...