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 相关文章推荐
Firefox div高度自适应
Apr 28 Javascript
JavaScript在IE和Firefox浏览器下的7个差异兼容写法小结
Jun 18 Javascript
一个简单的jquery的多选下拉框(自写)
May 05 Javascript
JS实现简单的顶部定时关闭层效果
Jun 15 Javascript
全面理解JavaScript中的闭包
May 12 Javascript
老司机带你解读jQuery插件开发流程
May 16 Javascript
创建一个类Person的简单实例
May 17 Javascript
微信小程序加载更多 点击查看更多
Nov 29 Javascript
基于node.js的fs核心模块读写文件操作(实例讲解)
Sep 10 Javascript
webpack公共组件引用路径简化小技巧
Jun 15 Javascript
vue2.0父子组件间传递数据的方法
Aug 16 Javascript
javascript设计模式 ? 建造者模式原理与应用实例分析
Apr 10 Javascript
基于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按行读取、处理较大CSV文件的代码实例
2014/04/09 PHP
11个PHPer必须要了解的编程规范
2014/09/22 PHP
php禁止直接从浏览器输入地址访问.php文件的方法
2014/11/04 PHP
页面利用渐进式JPEG来提升用户体验度
2014/12/01 PHP
laravel-admin 中列表筛选方法
2019/10/03 PHP
Prototype源码浅析 String部分(二)
2012/01/16 Javascript
解析js原生方法创建表格效率测试
2013/07/08 Javascript
全面理解面向对象的 JavaScript(来自ibm)
2013/11/10 Javascript
jQuery使用andSelf()来包含之前的选择集
2014/05/19 Javascript
JQUERY的AJAX请求缓存里的数据问题处理
2016/02/23 Javascript
带有定位当前位置的百度地图前端web api实例代码
2016/06/21 Javascript
js从外部获取图片的实现方法
2016/08/05 Javascript
Jq通过td获取同行其它列td的方法
2016/10/05 Javascript
详解vue之页面缓存问题(基于2.0)
2017/01/10 Javascript
jQuery UI仿淘宝搜索下拉列表功能
2017/01/10 Javascript
JavaScript类数组对象转换为数组对象的方法实例分析
2018/07/24 Javascript
浅谈Vue SSR中的Bundle的具有使用
2019/11/21 Javascript
微信小程序地图实现展示线路
2020/07/29 Javascript
在vue中使用Echarts利用watch做动态数据渲染操作
2020/07/20 Javascript
vue3.0实现点击切换验证码(组件)及校验
2020/11/18 Vue.js
[49:20]2014 DOTA2国际邀请赛中国区预选赛5.21 CIS VS TongFu
2014/05/22 DOTA
python设置检查点简单实现代码
2014/07/01 Python
跟老齐学Python之私有函数和专有方法
2014/10/24 Python
python将MongoDB里的ObjectId转换为时间戳的方法
2015/03/13 Python
python中pandas.DataFrame排除特定行方法示例
2017/03/12 Python
解决已经安装requests,却依然提示No module named requests问题
2018/05/18 Python
django中ImageField的使用详解
2020/12/21 Python
中国汽车租赁行业头部企业:一嗨租车
2019/05/16 全球购物
英国拖鞋购买网站:Bedroom Athletics
2020/02/28 全球购物
十佳护士获奖感言
2014/02/18 职场文书
高中班主任评语大全
2014/04/25 职场文书
商业计算机应用专业自荐书
2014/06/09 职场文书
注册资产评估专业求职信
2014/07/16 职场文书
装饰公司活动策划方案
2014/08/23 职场文书
幼儿园感恩节活动方案
2014/10/06 职场文书
Jupyter Notebook内使用argparse报错的解决方案
2021/06/03 Python