Vue 简单实例 购物车2 - 修改商品数量和价格
2023-09-27 14:24:39 时间
通过过滤器,修改商品数量,价格随之跟着变化。
1、先把 + - 添加点击事件:
<a class="input-sub" @click="editCart('minus', item)">-</a> <a class="input-add" @click="editCart('add', item)">+</a> <script> export default { methods: { // 加减修改商品数量及状态 editCart(type, item) { console.log(type, item) if (type === 'add') { item.productNum++ } else if (type === 'minus') { if (item.productNum == 0) return item.productNum-- } else { item.checked = !item.checked } } } } </script>
2、再给选择框添加点击事件
<a href="javascipt:;" :class="[item.checked ? 'checked' : '', 'checkbox-btn', 'item-check-btn']" @click="editCart('checked', item)">
这时点击前面的圆框会实现勾选状态,反之为没勾选状态。
3、定义过滤器:
// 定义过滤器 filters: { curreney(value) { if (!value) return 0.0 return '¥' + value.toFixed(2) + '元' } },
4、在价格里使用:
<div class="item-price-total"> {{ (item.productPrice * item.productNum) | curreney }} </div>
这时点击 - 或者 + ,数量进行加减,价格也会随之跟着而变化。
相关文章
- Vue项目优化,echart实例
- vue中const
- (尚024)Vue_案例_交互删除
- [转] 从零构建 vue2 + vue-router + vuex 开发环境到入门,实现基本的登录退出功能
- vue - 实例事件
- vue - v-text 和 v-html
- Laravel + Vue + element-ui 【前端项目一】 留言评论 7
- 【Vue】通过Animate.css实现第三方动画效果示例(图文+实例)
- 【Vue】vue中VM的生命周期及加载和销毁实例
- 【Javascript/Vue】如何解决js中超链接跳转到新的页面不被浏览器拦截?(已解决,代码实例,亲测有效)
- vue 自定义指令(directive)实例
- vue-router钩子beforeRouteEnter函数获取到this实例
- 06Vue - Vue实例(构造器)
- [转]详解vue父组件传递props异步数据到子组件的问题
- Vue项目--尚品汇(购物车页面的一些操作(修改数量,勾选,删除等))
- Vue知识点总结(14)——其它组件通信方式(provide/inject和$parent/$children)(超级详细)
- vue去掉严格开发,即去掉vue-cli安装时的eslint
- Vue+Echarts监控大屏实例八:智慧社区监控模板实例
- vue实战入门基础篇十:从零开始仿门户网站实例-代码重构并发布项目
- vue实战入门基础篇九:从零开始仿门户网站实例-移动端界面适配
- vue mint-ui 框架下拉刷新上拉加载组件的使用
- vue中mixins的使用方法和注意点(详2)(异步请求的情况)
- Vue-插槽的使用
- Vue 之 Vuex 使用 vuex 实现一个todo 列表的简单实例
- Vue 实例实战之 Vue webpack 仿去哪儿网App页面开发(应用中的几个页面简单实现)
- 08-vue-cli 本地存储
- spring boot + vue + element-ui全栈开发入门——开篇
- Vue开发实例(12)之实现动态左侧菜单导航
- Vue设置导航栏为公共模块并在登录页不显示
- vue-ssr
- Vue.js 技术揭秘学习 (2) Vue 实例挂载的实现