1、計算屬性介紹
在第二章中我們介紹了在vue的}中可以使用一些簡單的表示式進行計算,但是當表示式過長或者邏輯過於複雜就會變得不易理解和維護,比如第二章的示例},為了使}的內容看起來更簡潔,就需要用到vue中計算屬性,如下示例
doctype html
>
<
html
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>vue 示例
title
>
<
script
src=""
>
script
>
head
>
<
body
>
<
div
id>
}div
>
<
script
>
var=
newvue(,
computed:}})
script
>
body
>
html
>
2、計算屬性用法
2.1、計算屬性的常用用法
計算屬性通常被用於完成各種複雜邏輯,包括運算和函式呼叫等,計算屬性可以依賴多個vue例項資料,任意乙個資料變化都會使計算屬性重新執行,頁面也會隨之更新,如下示例
doctype html
>
<
html
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>vue 示例
title
>
<
script
src=""
>
script
>
head
>
<
body
>
<
div
id>
總價:}
div>
<
script
>
var=
newvue(,
],package2:[,]
},computed:
for(
vari =0
;i<
this
.packages1.length;i++)
return
prices;}}
})script
>
body
>
html
>
2.2、計算屬性的getter方法和setter方法
每個計算屬性都有getter和setter兩種方法,分別是讀取計算屬性資料和修改計算屬性資料的,如下示例
doctype html
>
<
html
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>vue 示例
title
>
<
script
src=""
>
script
>
head
>
<
body
>
<
div
id>
姓名:}
div>
<
script
>
var=
newvue(,
computed:,
set:
function
() }
}});
script
>
body
>
html
>
2.3、計算屬性小技巧
2.3.1、計算屬性可以依賴其他計算屬性
在vue例項的計算屬性中我們可以呼叫其他vue例項中計算屬性的返回值參與計算,如下示例
doctype html
>
<
html
>
<
head
>
<
meta
charset
="utf-8"
>
<
script
src=""
>
script
>
<
title
>vue 示例
title
>
head
>
<
body
>
<
div
id>
電子產品總價:}
div>
<
div
id>
商品總價:}
div>
<
script
>
var=
newvue(,]},
computed:
return
price1;}}
});var=
newvue(,]},
computed:}})
script
>
body
>
html
>
2.3.2 計算屬性可以依賴其他vue例項的資料
就像在計算屬性中可以呼叫其他vue例項的計算屬性返回值一樣,同樣的我們也可以呼叫其他vue例項中的資料參與計算,如下示例
doctype html
>
<
html
>
<
head
>
<
meta
charset
="utf-8"
>
<
script
src=""
>
script
>
<
title
>vue 示例
title
>
head
>
<
body
>
<
div
id>
div>
<
div
id>
商品總價:}
div>
<
script
>
var=
newvue(,]}
});var=
newvue(,]},
computed:
for(
vari=0
;i<
++) }})
script
>
body
>
html
>
3、計算屬性快取
在第二章中我們介紹過乙個跟計算屬性功能類似的屬性methods,在methods屬性中同樣可以定義函式實現一樣的功能,那麼為什麼還會有計算屬性這個看似多餘的屬性呢,當然是因為這兩者之間是有區別的,區別就在於methods屬性不會快取計算結果,每一次頁面渲染都會重新呼叫methods屬性中的函式進行計算,而計算屬性則會講計算結果快取起來,只要它依賴的資料沒有變化,無論頁面渲染多少次都不會重新呼叫函式進行計算,因此methods適合用於邏輯簡單,資料量小的場景,而當計算邏輯較為複雜,資料量很大時則需要使用計算屬性講結果快取,提公升使用者體驗。
Pytho基礎 第三章
3.1.1 def語句和引數 在呼叫print 或 len 等函式時,會傳入一些值放於括號中間,在此稱為引數。也可以自行定義接收引數的函式。def hello name print hello name hello yang 在此函式定義中,name為乙個 變元 即可以存放引數以及賦值。值得注意的是...
第三章 語言基礎
它是操作符,不是函式,所以不需要引數 也可以使用引數 let message x console.log typeof message string 以下是乙個特殊情況 console.log typeof null object 因為null被認為是乙個對空物件的引用。0.這個型別只有乙個值 un...
第三章 MapReduce計算模型
3.1 為什麼用mapreduce 分布式 海量資料 3.2 mapreduce計算模型 jobtracker,使用者管理和排程工作 tasktracker,用於執行工作 job,每個個mapreduce任務被初始化為乙個job,每個job又分為兩個階段,分別用map函式和reduce函式表示這兩個...