vue实现购物车加减


Posted in Javascript onMay 30, 2020

本文实例为大家分享了vue实现购物车加减的具体代码,供大家参考,具体内容如下

通常我们会在模板中绑定表达式,模板是用来描述视图结构的。如果模板中的表达式存在过多的逻辑,模板会变得臃肿不堪,维护变得非常困难。因此,为了简化逻辑,当某个属性的值依赖于其他属性的值时,我们可以使用计算属性。

那么什么是计算属性呢?

计算属性就是当其依赖属性的值发生变化是,这个属性的值会自动更新,与之相关的DOM部份也会同步自动更新。
实现的效果图如下:

vue实现购物车加减

我是使用了bootstrap跟Vue去完成这个效果的。

首先导入包:

<link rel="stylesheet" href="css/bootstrap.css" />
<script type="text/javascript" src="js/vue.js" ></script>

接着是布局样式:

<div id="app">
 <div class="container">
 <table class="table table-bordered table-hover"> 
 <tr>
 <td>
  <input type="checkbox" v-model="checkAll" @click="selectAll" />
 </td>
 <td>
 商品名称
 </td>
 <td>
 商品价格
 </td>
 <td>
 商品数量
 </td>
 <td>
 商品总额
 </td>
 <td>
 操作
 </td>
 </tr>
  <tr v-for="(item,index) in listInfo">
  <td>
  <input type="checkbox" :value="item.id" v-model="checkItem" @change="selectOne" />
  </td>
 <td>{{item.shopName}}</td>
 <td>{{item.shopPrice}}</td>
 <td>
 <button class="btn btn-default" @click="reduce(index)">-</button>
 <input type="text" v-model="item.shopCount" />
 <button class="btn btn-default" @click="add(index)">+</button>
 </td>
 <td>
 {{item.shopPrice*item.shopCount}}
 </td>
 <td>
 <button class="btn btn-warning" @click="del(index)">删除</button>
 </td>
 </tr> 
 </table>
 <p class="text-right">
 金额总计:{{sum}}
 </p>
 <p class="text-right">
 商品数量:{{count}}
 </p>
 <hr />
 <form>
 <div class="form-group">
 <input class="form-control" placeholder="商品名称" v-model="shopName" />
 </div>
 <div class="form-group">
 <input class="form-control" placeholder="商品价格" v-model = "shopPrice"/>
 </div>
 <div class="form-group">
 <button class="btn btn-primary" type="button" @click="addInfo">增加</button>
 </div>
 </form>
 </div>
</div>

最后是方法:

<script>
 new Vue({
 el:"#app",
 data:{
 listInfo:[
 {id:1,shopName:"男装1",shopPrice:1000,shopCount:0},
 {id:2,shopName:"男装2",shopPrice:2000,shopCount:0},
 {id:3,shopName:"男装3",shopPrice:3000,shopCount:0},
 {id:4,shopName:"男装4",shopPrice:4000,shopCount:0},
 {id:5,shopName:"男装5",shopPrice:5000,shopCount:0},
 ],
 shopName:"",
 shopPrice:"",
 checkItem:[],
 checkAll:false
 },
 methods:{
 add:function(index){
 this.listInfo[index].shopCount++
 
 },
 reduce:function(index){
 if(this.listInfo[index].shopCount<=0){
 this.listInfo[index].shopCount = 0
 }else {
 this.listInfo[index].shopCount--
 }
 
 },
 del:function(index){
  this.listInfo.splice(index,1)
 },
 addInfo:function(){
// alert(1)
 
 var obj = {
 id:this.listInfo.length+1,
 shopName:this.shopName,
 shopPrice:this.shopPrice,
 shopCount:0
 }
 console.log(obj)
 this.listInfo.push(obj) 
 },
 
 selectAll:function(){
 this.checkItem = []
 if(!this.checkAll){
 for (var i=0;i<this.listInfo.length;i++) {
 this.checkItem.push(this.listInfo[i].id)
 }
 }else {
 this.checkItem = []
 this.checkAll = false
 }
 },
 selectOne(){
 console.log(this.checkItem)
 if(this.checkItem.length == this.listInfo.length){
 this.checkAll = true
 }else {
 this.checkAll = false
 }
 }
 },
 computed:{
 sum(){
 var total = 0
 for (var i=0;i<this.listInfo.length;i++) {
 total+=parseFloat(this.listInfo[i].shopPrice)*parseFloat(this.listInfo[i].shopCount)
 }
 return total 
 },
 count:function(){
 var total = 0
 for (var i=0;i<this.listInfo.length;i++) {
 total+=parseInt(this.listInfo[i].shopCount)
 }
 return total
 }
 }
 })
</script>

通过以上的代码即可实现简单的购物车加减与增加删除!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript算法学习(直接插入排序)
Apr 12 Javascript
使用firebug进行调试javascript的示例
Dec 16 Javascript
AngularJS 作用域详解及示例代码
Aug 17 Javascript
vue.js入门教程之基础语法小结
Sep 01 Javascript
ES6扩展运算符的用途实例详解
Aug 20 Javascript
详解用Node.js实现Restful风格webservice
Sep 29 Javascript
详解vue.js数据传递以及数据分发slot
Jan 20 Javascript
vue项目中使用ueditor的实例讲解
Mar 05 Javascript
解决jquery的ajax调取后端数据成功却渲染失败的问题
Aug 08 jQuery
react+redux仿微信聊天界面
Jun 21 Javascript
详解用async/await来处理异步
Aug 28 Javascript
jquery简易手风琴插件的封装
Oct 13 jQuery
基于vue和bootstrap实现简单留言板功能
May 30 #Javascript
JS常见内存泄漏及解决方案解析
May 30 #Javascript
react结合bootstrap实现评论功能
May 30 #Javascript
基于JavaScript或jQuery实现网站夜间/高亮模式
May 30 #jQuery
JavaScript类的继承多种实现方法
May 30 #Javascript
Vue实现购物车实例代码两则
May 30 #Javascript
vue实现购物车案例
May 30 #Javascript
You might like
php下载文件,添加响应头的简单实例
2016/09/22 PHP
php实现微信模板消息推送
2018/03/30 PHP
Laravel 对某一列进行筛选然后求和sum()的例子
2019/10/10 PHP
javascript getElementsByClassName实现代码
2010/10/11 Javascript
js读取csv文件并使用json显示出来
2015/01/09 Javascript
用js编写的简单的计算器代码程序
2015/08/04 Javascript
不得不分享的JavaScript常用方法函数集(下)
2015/12/25 Javascript
限制只能输入数字的实现代码
2016/05/16 Javascript
AngularJS基础 ng-mouseleave 指令详解
2016/08/02 Javascript
Node.js下自定义错误类型详解
2016/10/17 Javascript
JS实现自动阅读单词(有道单词本添加功能)
2016/11/14 Javascript
Vue中img的src属性绑定与static文件夹实例
2017/05/18 Javascript
Node.js+ES6+dropload.js实现移动端下拉加载实例
2017/06/01 Javascript
js根据需要计算数组中重复出现某个元素的个数
2019/01/18 Javascript
javascript面向对象三大特征之继承实例详解
2019/07/24 Javascript
vue组件命名和props命名代码详解
2019/09/01 Javascript
[03:18]DOTA2放量测试专访820:希望玩家加入国服大家庭
2013/08/25 DOTA
[03:08]Ti4观战指南上
2014/07/07 DOTA
python3读取MySQL-Front的MYSQL密码
2017/05/03 Python
python绘制双Y轴折线图以及单Y轴双变量柱状图的实例
2019/07/08 Python
Python 字符串、列表、元组的截取与切片操作示例
2019/09/17 Python
python实现多进程按序号批量修改文件名的方法示例
2019/12/30 Python
python爬取代理IP并进行有效的IP测试实现
2020/10/09 Python
Python爬虫实战案例之爬取喜马拉雅音频数据详解
2020/12/07 Python
HTML5的video标签的浏览器兼容性增强方案分享
2016/05/19 HTML / CSS
英国健康和美容技术产品购物网站:CurrentBody
2019/07/17 全球购物
数据员岗位职责
2013/11/19 职场文书
小学生自我评价范文
2014/01/25 职场文书
群众路线剖析材料
2014/02/02 职场文书
质量管理标语
2014/06/12 职场文书
见习报告的格式
2014/10/31 职场文书
2015年销售人员工作总结
2015/04/07 职场文书
大学毕业晚会开场白
2015/05/29 职场文书
工程进度款催款函
2015/06/24 职场文书
《围炉夜话》110句人生箴言,精辟有内涵,引人深思
2019/10/23 职场文书
Vue实现跑马灯样式文字横向滚动
2021/11/23 Vue.js