vue实现购物车加减
作者:GaHoOo 发布时间:2023-07-02 17:10:04
标签:vue,购物车
本文实例为大家分享了vue实现购物车加减的具体代码,供大家参考,具体内容如下
通常我们会在模板中绑定表达式,模板是用来描述视图结构的。如果模板中的表达式存在过多的逻辑,模板会变得臃肿不堪,维护变得非常困难。因此,为了简化逻辑,当某个属性的值依赖于其他属性的值时,我们可以使用计算属性。
那么什么是计算属性呢?
计算属性就是当其依赖属性的值发生变化是,这个属性的值会自动更新,与之相关的DOM部份也会同步自动更新。
实现的效果图如下:
我是使用了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>
通过以上的代码即可实现简单的购物车加减与增加删除!
来源:https://blog.csdn.net/GaHoOo/article/details/83586824
0
投稿
猜你喜欢
- Hello,World,几乎是程序猿学习各种语言的第一个程序,心血来潮,有空拿主流开发语言如何实现,汇总并整理了下.包括大致快速了解下这门语
- subprocess官方中文文档介绍参考文档,我的直观感受和实际用法是:subprocess可以开启一个子进程来运行cmd命令。那就意味着可
- 本文实例讲述了python提取内容关键词的方法。分享给大家供大家参考。具体分析如下:一个非常高效的提取内容关键词的python代码,这段代码
- goland leetcode 插件安装可以提高刷题效率,对于学习算法的同学是个不错的选择安装使用步骤:安装插件:a. 左上角Goland
- 关于DHT协议DHT协议作为BT协议的一个辅助,是非常好玩的。它主要是为了在BT正式下载时得到种子或者BT资源。传统的网络,需要一台中央服务
- 这篇博客主要是为了学习Python和PyQt,因为对棋类游戏比较热衷,所以从规则较简单的五子棋入手,利用PyQt5实现图形界面,做一个可以进
- eval函数就是实现list、dict、tuple与str之间的转化str函数把list,dict,tuple转为为字符串一、字符串转换成列
- 栗子:计算斐波那契数列(任一个数都是前两个数之和的数字序列)Python2.7实现代码如下:<strong><span s
- 爬蟲四步原理:1.发送请求:requests2.获取相应数据:对方及其直接返回3.解析并提取想要的数据:re4.保存提取后的数据:with
- 目录1.列表中存储字典:1.列表中存储多个字典2.访问列表中字典的值3.遍历访问多个值2.字典中存储列表1.访问字典中的列表元素2.访问字典
- 本文详细讲述了MYSQL日志的正确删除方法。分享给大家供大家参考,具体如下:1.查找:MySQL> show binary logs;
- 最近Google官方的开发者博客中宣布新的版本Tensorflow(0.12)将增加对Windows的支持,想试着windows10下学习t
- 研究网页编码很长时间了,因为最近要设计一个友情链接检测的VBS脚本,而与你链接的人的页面很可能是各种编码,以前采取的方法是:如果用GB231
- 本文实例讲述了Python列表推导式与生成器表达式用法。分享给大家供大家参考,具体如下:和列表一样,列表推导式也采用方括号[]表示,并且用到
- vue中实现拖拽效果,供大家参考,具体内容如下首先要搞明白分清clientY pageY screenY layerY offsetY的区别
- 如下所示:# 返回一个列表中出现次数最多的元素def showmax(lt): index1 = 0&n
- pandas每次多Sheet写入文件,只能一次性存入,不然每次会重写文件,最后只保留最后一次的写入。# !usr/bin env pytho
- 本文介绍了python 支持向量机非线性回归SVR模型,废话不多说,具体如下:import numpy as npimport matplo
- 本文实例为大家分享了python实现爬取图书封面的具体代码,供大家参考,具体内容如下kongfuzi.py利用更换代理ip,延迟提交数据,设
- 菜鸟一枚,写着试了试,虽说有点杂乱,但还是能用,我是在linux下运行的大致说下过程:1、把需要ping的网段中所有ip存到数组中(我是放到