069——VUE中vuex之使用getters高效获取购物车商品总价
2024-10-20 00:47:32
<!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">
<lists></lists>
</div>
<script type="text/x-template" id="lists">
<div>
<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>{{v.num}}</td>
<td></td>
</tr>
</table>
<h1>总价：{{totalPrice}}</h1>
</div>
</script>
<script>
let store = new Vuex.Store({
state: {
totalPrice: 100,
goods: [
{id: 1, title: 'iphone7', price: 100, num: 2},
{id: 2, title: 'vivo20', price: 200, num: 2}
]
},
getters: {
//获取商品总价：
totalPrice: state => {
let totalPrice = 0;
state.goods.forEach((v) => {
totalPrice += v.price * v.num;
})
return totalPrice;
}
}
});
let lists = {
template: '#lists',
computed: {
totalPrice() {
return this.$store.getters.totalPrice;
},
goods() {
return this.$store.state.goods;
}
}
}
new Vue({
el: "#demo",
store,
components: {
lists
} });
</script>
</body>
</html>
最新文章
- Javascript 执行环境及作用域
- curl命令学习笔记
- Javascript中void操作符
- python4delphi Python could not be properly initialized. We must quit.
- Leetcode#81 Search in Rotated Sorted Array II
- Android viewPage notifyDataSetChanged无刷新
- 仿写自己的一个加载语言包的L函数
- WebService实现文件上传下载
- HTML、CSS、JS、PHP 的学习顺序~（零基础初学者）
- (原)在ubuntu 中安装 swi prolog 和 简单的使用
- 百度Echarts使用心得
- 安卓的UI界面开发(初学者推荐)
- 独家探寻阿里安全潘多拉实验室，完美越狱苹果iOS11.2.1
- 标准模式 怪异模式 盒模型 doctype
- struct放入list中按照某字段排序
- 6个免费的C++图形和游戏库
- 匹配整个img路径
- 29.如何不用 transition 和 animation 也能做网页动画
- 7 款顶级的开源 Web 分析软件
- BZOJ3481 DZY Loves Math III（数论+Pollard_Rho）