071——VUE中vuex之使用getters计算每一件购物车中商品的总价
2024-08-30 00:29:34
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vuex之使用getters计算每一件购物车中商品的总价</title>
<script src="vue.js"></script>
<script src="vuex.js"></script>
</head>
<body>
<div id="demo">
<footer-cart></footer-cart>
<Lists></Lists> </div>
<script type="text/x-template" id="Lists">
<div>
<h1>购物车</h1>
<table border="1">
<tr>
<th>编号</th>
<th>名称</th>
<th>价格</th>
<th>数量</th>
<th>总计</th>
</tr>
<tr v-for="v in goods">
<td>{{v.id}}</td>
<td>{{v.title}}</td>
<td>{{v.price}}</td>
<td>
<input type="text" v-model="v.num">
</td>
<td>{{v.totalPrice}}</td>
</tr>
</table> </div>
</script>
<script type="text/x-template" id="footerCart">
<div>
总计：{{totalPrice}}
</div>
</script>
<script>
let Lists = {
template: "#Lists",
computed: {
goods() {
return this.$store.getters.goods;
}
}
}
let footerCart = {
template: "#footerCart",
computed: {
totalPrice() {
return this.$store.getters.totalPrice;
}
}
}
let store = new Vuex.Store({
state: {
goods: [
{id: 1, title: 'ihpone7', price: 100, num: 3},
{id: 2, title: 'vivo20', price: 100, num: 2}
]
},
getters: {
//获取商品总价：
totalPrice: state => {
let totalPrice = 0;
state.goods.forEach((v) => {
totalPrice += v.num * v.price;
});
return totalPrice;
},
goods(state) {
let goods = state.goods;
goods.forEach((v) => {
v.totalPrice = v.num * v.price;
})
return goods;
}
}
});
var app = new Vue({
el: "#demo",
store,
components: {
Lists,footerCart
}
});
</script>
</body>
</html>
最新文章
- Oracle学习总结_day01_day02_表的创建_增删改查_约束
- MongoDB csv文件导入导出
- 利用css3新增选择器制作背景切换
- 在Linux中让打印带颜色的字
- jQuery coveringBad 效果对比
- 13. Android框架和工具之 Android Drawable Factory
- 造一个Badge Service（徽章）的轮子
- java笔记3之赋值运算符
- BZOJ 1176([Balkan2007]Mokia-CDQ分治-分治询问)
- POJ 2352 &amp;&amp; HDU 1541 Stars (树状数组)
- ENode 2.0
- poj 1056 IMMEDIATE DECODABILITY 字典树
- c++ 求集合的交并补
- 腾讯云centos7安装MySQL
- gcc update in centos to 6.3 by scl
- iframe可通过postMessage解决跨域、跨窗口消息传递
- [NOI 2017]蚯蚓排队
- LuoguP2398 GCD SUM
- SharePoint 2013 Step by Step——使用自定义的List Template
- Mybatis系列(四)：Mybatis缓存