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 相关文章推荐
js判断浏览器类型的方法
Aug 07 Javascript
jQuery的$.proxy()应用示例介绍
Apr 03 Javascript
js 设置缓存及获取设置的缓存
May 08 Javascript
js中的hasOwnProperty和isPrototypeOf方法使用实例
Jun 06 Javascript
ext前台接收action传过来的json数据示例
Jun 17 Javascript
JavaScript实现向setTimeout执行代码传递参数的方法
Apr 16 Javascript
AspNet中使用JQuery boxy插件的确认框
May 20 Javascript
JavaScript操作XML文件之XML读取方法
Jun 09 Javascript
简单谈谈关于 npm 5.0 的新坑
Jun 08 Javascript
react-router JS 控制路由跳转实例
Jun 15 Javascript
详解.vue文件解析的实现
Jun 11 Javascript
详解超简单的react服务器渲染(ssr)入坑指南
Feb 28 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 网上商城促销设计实例代码
2012/02/17 PHP
ThinkPHP3.1新特性之G方法的使用
2014/06/19 PHP
PHP封装CURL扩展类实例
2015/07/28 PHP
分析PHP中单双引号的误区和双引号小隐患
2016/07/19 PHP
thinkPHP框架实现生成条形码的方法示例
2018/06/06 PHP
我的javascript 函数链之演变
2011/04/07 Javascript
Jquery中val()表单取值赋值的实例代码
2013/08/15 Javascript
使用typeof判断function是否存在于上下文
2014/08/14 Javascript
纯JavaScript基于notie.js插件实现消息提示特效
2016/01/18 Javascript
JavaScript性能优化总结之加载与执行
2016/08/11 Javascript
js获取地址栏中传递的参数(两种方法)
2017/02/08 Javascript
vue.js中Vue-router 2.0基础实践教程
2017/05/08 Javascript
微信小程序组件 marquee实例详解
2017/06/23 Javascript
详解AngularJS ng-class样式切换
2017/06/27 Javascript
AngularJS ng-repeat指令及Ajax的应用实例分析
2017/07/06 Javascript
angularJs select绑定的model取不到值的解决方法
2018/10/08 Javascript
在vue中使用setInterval的方法示例
2019/04/16 Javascript
小程序云开发教程如何使用云函数实现点赞功能
2019/05/18 Javascript
Vue 实现html中根据类型显示内容
2019/10/28 Javascript
原生js+ajax分页组件
2020/01/30 Javascript
Vue如何使用混合Mixins和插件开发详解
2020/02/05 Javascript
JavaScript 判断数据类型的4种方法
2020/09/11 Javascript
[01:24:16]2018DOTA2亚洲邀请赛 4.6 全明星赛
2018/04/10 DOTA
Python的ORM框架SQLAlchemy入门教程
2014/04/28 Python
python导入时小括号大作用
2017/01/10 Python
pandas string转dataframe的方法
2018/04/11 Python
浅谈django的render函数的参数问题
2018/10/16 Python
python退出命令是什么?详解python退出方法
2018/12/10 Python
用xpath获取指定标签下的所有text的实例
2019/01/02 Python
Python对接六大主流数据库(只需三步)
2019/07/31 Python
大学自荐信
2013/12/12 职场文书
管理心得体会
2013/12/28 职场文书
亲戚结婚的请假条
2014/02/11 职场文书
教师自我鉴定范文
2014/03/20 职场文书
求职信怎么写范文
2014/05/26 职场文书
看看如何用Python绘制小米新版天价logo
2021/04/20 Python