vue.js計算屬性用法(computed)
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- Vue.js -->
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
總價: {{ prices }}
</div>
</body>
</html>
<script>
var app = new Vue({
el:'#app',
data:{
package1:[
{
name:'iphone7',
price:7199,
count:2
},
{
name:'ipad',
price:2888,
count:1
}
],
package2:[
{
name:'apple',
price:3,
count:5
},
{
name:'banana',
price:2,
count:10
}
]
},
//所有的計算屬性都以函式的形式寫在vue例項內的computed選項內,最終返回計算的結果
computed:{
prices:function () {
var prices = 0;
for (var i = 0;i<this.package1.length;i++){
prices += this.package1[i].price * this.package1[i].count;
}
for (var i = 0;i<this.package2.length;i++){
prices += this.package2[i].price * this.package2[i].count;
}
return prices;
}
}
})
</script>
相關文章
- vue.js計算屬性(computed)Vue.js
- Vue.js入門學習 -- 計算屬性Computed( 十一)Vue.js
- vue.js計算屬性用法(computed)技巧,依賴其他vue例項的資料Vue.js
- Vue(5)計算屬性computedVue
- Vue — 計算屬性(computed)詳解Vue
- Vue.js 計算屬性Vue.js
- Vue筆記三——計算屬性(computed)Vue筆記
- 深入理解 Vue Computed 計算屬性Vue
- 如何用redux實現computed計算屬性Redux
- Vue學習之理解計算屬性computedVue
- vue.js計算屬性(getter | setter)Vue.js
- Vue之computed(計算屬性)詳解get()、set()Vue
- Vue3原始碼解析(computed-計算屬性)Vue原始碼
- [譯] 監測與除錯 Vue.js 的響應式系統:計算屬性樹(Computed Tree)除錯Vue.js
- 【原始碼系列#03】Vue3計算屬性原理(Computed)原始碼Vue
- Vue原始碼學習(十七):實現computed計算屬性Vue原始碼
- Vue.js 的 computed 屬性和 watch 的區別在哪裡?Vue.js
- 前端【VUE】03-vue【computed 計算屬性】【watch 偵聽器】前端Vue
- vue.js基礎02--計算屬性(computed、watch、&watch)、過濾器、自定義元件(component、components)Vue.js過濾器元件
- Vue中計算屬性computed與偵聽器watch的區別Vue
- 前端筆記 - vue2.x計算屬性computed初始化前端筆記Vue
- 計算屬性
- vue中的computed屬性Vue
- [Vue.js進階]從原始碼角度剖析計算屬性的原理Vue.js原始碼
- vue從入門到進階:計算屬性computed與偵聽器watch(三)Vue
- Vue的計算屬性Vue
- Vue 計算屬性與方法Vue
- 【Vue.js 牛刀小試】05:第五章 – 計算屬性與監聽器Vue.js
- 【Vue.js 牛刀小試】05:第五章 - 計算屬性與監聽器Vue.js
- (精華2020年5月4日更新) vue教程篇 計算屬性computed的使用Vue
- CSS zoom屬性用法CSSOOM
- knockout原始碼分析之computed(依賴屬性)原始碼
- Vue 框架-04-計算屬性Vue框架
- vue計算屬性和vue實力的屬性和方法Vue
- Vue.js設計與實現學習總結(第四章6)計算屬性Vue.js
- React屬性用法總結React
- javascript textContent屬性用法JavaScript
- background屬性用法詳解