Vue实现计算商品总价简单案例

计算商品总价简单案例-Vue

练习vue的指令和计算属性的一个小案例。

主要效果：

数量增加和减少，小于1不可操作
删除操作
任何加、减、删除操作都会更新总价
商品全删除后显示提示

代码：

<body><div id="app"></div><template id="myapp"><table border="1" v-show="isShow"><tr><th>序号</th><th>书籍名称</th><th>出版日期</th><th>价格</th><th>数量</th><th>操作</th></tr><tr v-for="(item,index) in books" :key="item.id"><td>{{index}}</td><td>{{item.title}}</td><td>{{item.date}}</td><td>{{item.price}}</td><td><button @click="min(index)" :disabled="item.count <= 1 ">-</button>{{item.count}}<button @click="plu(index)">+</button></td><td><button @click="deleteBook(index)">删除</button></td></tr></table><p v-show="!isShow">删完啦~</p><!-- 使用计算属性 --><span>总价：{{getTotal}}</span></template><script>Vue.createApp({template: '#myapp',data() {return {books: [{id: 1,title: '《感恩》',date: '2015-6-9',price: 60,count: 1,},{id: 2,title: '《感恩》',date: '2015-6-9',price: 60,count: 2,},{id: 3,title: '《感恩》',date: '2015-6-9',price: 60,count: 2,},],}},computed: {// 声明计算属性// 计算总价getTotal(){let total = 0;this.books.map((item,index)=>{total += item.price * item.count;})return total},// 商品删除完后的显示控制isShow() {return this.books.length > 0 ? true : false;}},methods: {// 删除商品deleteBook(index) {// 删除 1 个数组位置 index 起始的元素this.books.splice(index, 1);},// 减少数量min(index) {this.books[index].count--;},// 增加数量plu(index) {this.books[index].count++;},}}).mount('#app')</script>
</body>

效果：

使用:
vue指令
vue计算属性
map() 方法
splice() 方法

Vue实现计算商品总价简单案例相关推荐

vue使用计算属性计算商品总价
vue计算商品总价使用 ---- 计算属性注命名规则: 属性名称,方法名称,变量名称尽量使用小驼峰命名法 computed:{totalPrice() {let totalPrice = 0fo ...
vue实现计算商品sku笛卡尔积（干活）
在 Vue 中计算商品 SKU 的笛卡尔积,您可以按照以下步骤进行: 定义商品属性和属性值在 Vue 组件中定义商品属性和属性值,可以使用对象或数组来表示: // 商品属性 const attrib ...
vue下使用fullcalendar及简单案例
ps:我真的感觉自己是个前端了,最近天天在写前端.不过很多复杂逻辑,后台处理起来比较麻烦,所以只让后台提供简单数据,前端封装处理数据确实比较方便! 引子:最近公司要做个人日程管理,故鄙人思前想后,选择 ...
购物车（七）-计算商品总价——计算总价-计算属性数据缓存api-wx.setStorageSync()方法
计算商品总价--计算总价-计算属性 & 数据缓存api-wx.setStorageSync()方法通过计算属性计算商品总价 allPrice() {// 计算购物车所有商品的总价格// 单价 ...
【计算商品总价~python+】
目录~python 计算商品总价运行效果如下: pandas 每日一练: 程序运行结果如下: 92.计算第一列数字前一个与后一个的差值程序运行结果如下: 93.提取第一列位置在1,5,9 程序运行 ...
python计算商品总价_GitHub - ideaOzy/data_analysis: 基于Python的南京二手房数据采集及可视化分析...
基于Python的南京二手房数据采集及可视化分析 1 内容简介首先通过爬虫采集链家网上所有南京二手房的房源数据,并对采集到的数据进行清洗:然后,对清洗后的数据进行可视化分析,探索隐藏在大量数据背后的 ...
python计算商品总价_python根据京东商品url获取产品价格
京东商品详细的请求处理,是先显示html,然后再ajax请求处理显示价格. 1.可以运行js,并解析之后得到的html 2.模拟js请求,得到价格 # -*- coding: utf-8 -*- &q ...
python语言求商品的总价_计算商品总价？
如何通过checkbox计算选中商品得价格? {{item.book_title}} ￥{{item.book_price}} 共 {{mount}} 本合计￥{{total}} 提交订单 imp ...
ECSHOP产品详情页修改商品购买数量并实时更新商品总价的实现与优化
当用户购买产品时,可能有时候不仅仅买一件商品,那么当客户购买多个当前产品时如果能同时显示总价,那么无疑将增加我们网站的亲和度!实现这个办法并不难,就是增加一个即时计算商品总价的js代码,这个网络有一篇 ...

Vue实现计算商品总价简单案例

计算商品总价简单案例-Vue

Vue实现计算商品总价简单案例相关推荐

最新文章

热门文章