vue实现购物车的小练习


Posted in Vue.js onDecember 21, 2020

今天从网上找了一个购物车的小例子,照着敲了一下,收获不少。下面的用一个小动图展示一下成果:

vue实现购物车的小练习

接下来上代码:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <link href="css/shoppingcart.css" rel="stylesheet" type="text/css" />
 <title></title>
 </head>
 <body>
 <div id="app">
 <h2>购物清单</h2>
 <div class="nav">
 <div><span class="noselected" v-bind:class="{selected:ifAllselect}" @click="allSelect(ifAllselect)"></span>全选</div>
 <div>商品</div>
 <div>数量</div>
 <div>单价(元)</div>
 <div>金额(元)</div>
 <div>操作</div>
 </div>
 <table class="goods">
 <tbody>
 <tr v-for="(item,index) in goods">
 <td><span class="noselected" v-bind:class="{selected:item.isSelect}" @click="item.isSelect=!item.isSelect"></span></td>
 <td>
 <div class="good" >
  <img v-bind:src='item.gimg' />
   <div>
  <h3>{{item.gname}}</h3>
  <span>{{item.gbrand}}   {{item.gplace}}</span><br />
  <span>{{item.gpurity}}   {{item.gminnum}}</span><br />
  <span>{{item.gstore}}</span>
   </div>
  </div>
 </td>
 <td><input type="number" v-model="item.gnum" min="0"/></td>
 <td><span>¥{{item.gprice}}</span></td>
 <td><span>¥{{item.gprice*item.gnum}}</span></td>
 <td><button @click="deleteSingle(index)">删除</button></td>
 </tr>
 </tbody>
 </table>
 <div class="footer">
 <button @click="deleteSel">删除所选商品</button>
 <button>继续购物</button>
 <span><span>{{getTotal.num}}</span>件商品(不含运费)总计:<span>¥{{getTotal.allprice}}</span></span>
 <button>去结算</button>
 </div>
 </div>
 </div>
 </body>
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 <script>
 var vm=new Vue({
 el:'#app',
 data:{ 
 goods:[
 {gname:'佳洁士美白牙膏',
 gbrand:'品牌:佳洁士',
 gplace:'产地:上海',
 gpurity:'规格:120g',
 gminnum:'起订量:10件',
 gstore:'仓库地:上海沧海仓储',
 gprice:'800',
 gimg:'img/good.jpg',
 gnum:'3',
 isSelect:false,
 },
 {gname:'佳洁士美白牙膏',
 gbrand:'品牌:佳洁士',
 gplace:'产地:上海',
 gpurity:'规格:120g',
 gminnum:'起订量:10件',
 gstore:'仓库地:上海沧海仓储',
 gimg:'img/good.jpg',
 gprice:'400',
 gnum:'5',
 isSelect:false, 
 }
 ] 
 },
 computed:{
 //实时判断是否全选
 ifAllselect:function(){
 var all;
 for(var i=0;i<this.goods.length;i++){
 if(this.goods[i].isSelect==false){
 all=false;
 break;
 }
 all=true;
 }
 return all;
 },
 //获取总件数和总金额数
 getTotal:function(){
 var num= 0 ;
 var allprice=0;
 for(var i=0;i<this.goods.length;i++){
 if(this.goods[i].isSelect==true){
 num=parseInt(num)+parseInt(this.goods[i].gnum);
 allprice=allprice+this.goods[i].gnum*this.goods[i].gprice;
 }
 }
 return{num:num,allprice:allprice}
 }
 },
 methods:{
 //全选或者取消全部选中
 allSelect:function(ifAllselect){
 for(var i=0;i<this.goods.length;i++){
 this.goods[i].isSelect=!ifAllselect;
 }
 },
 //删除单个商品
 deleteSingle:function(index){
 if(this.goods[index].isSelect==true)
 this.goods.splice(index,1);
 else alert('请选择您要删除的商品!');
 },
 //删除选中的商品
 deleteSel:function(){
 this.goods=this.goods.filter(function(item){return !item.isSelect})
 }
 }
 })
 </script>
</html>
*{
 padding: 0;
 margin: 0;
}
html,body{
 width: 100%;
 overflow-x:hidden ;
}
#app{
 width: 90%;
 margin: 50px auto;
 border: 1px solid gainsboro;
 border-top: none;
}
h2{ 
 display: block;
 border-top: 4px solid dodgerblue;
 font-size: 17px;
 padding-left: 20px;
 line-height: 50px;
 color: dodgerblue;
}
.nav{
 width: 100%;
 height: 40px;
 border:1px solid gainsboro ;
 border-left:none ;
 border-right: none;
}
.nav>div{
 height: 100%;
 float: left;
 display: flex;
 justify-content: center;
 align-items: center;
}
.nav div:nth-child(1){
 width: 15%;
}
.nav div:nth-child(2){
 width:37%;
}
.nav div:nth-child(3){
 width: 12%;
}
.nav div:nth-child(4){
 width: 12%;
}
.nav div:nth-child(5){
 width: 12%;
}
.nav div:nth-child(6){
 width: 12%;
 }
.noselected{
 display: inline-block;
 width: 17px; 
 height:17px;
 margin-right: 5px;
 background: url(../img/nocheck.png) no-repeat;
 background-size: contain;
}
.goods{
 width: 100%;
 height: auto;
}
.goods tr{
 width: 100%;
}
.goods tr td{
 padding: 20px 0;
}
.goods tr>td:nth-child(1){
 width: 17%;
 text-align: center;
}
.goods tr>td:nth-child(2){
 width: 35%;
}
.goods tr>td:nth-child(3){
 width: 12%;
 text-align: center;
}
.goods tr>td:nth-child(4){
 width: 12%;
 text-align: center;
}
.goods tr>td:nth-child(5){
 width: 12%;
 text-align: center;
}
.goods tr>td:nth-child(6){
 width: 12%;
 text-align: center;
}
.good{
 width: 100%;
 display: flex;
 align-items: center;
}
.good img{
 width:120px;
 height: 120px;
 float: left;
 border: 2px solid gainsboro;
 margin-right: 30px;
}
.good>div{
 font-size: 13px;
 line-height: 20px;
}
.good>div h3{
 font-size: 11px;
 margin-bottom: 5px;
}
.goods input[type=number]{
 width: 50px;
}
.goods tr td:nth-child(4),.goods tr td:nth-child(5){
 color: red;
}
button{
 cursor: pointer;
 border: none;
 outline: none;
 background-color: white;
}
.footer{
 display: flex;
 align-items: center;
 width: 100%;
 height: 50px;
 background-color: #F7F7F7;
 position: relative;
}
.footer button{
 border: none;
 background-color: #F7F7F7; 
 font-size: 15px;
}
.footer button:nth-child(1){
 margin-left: 30px;
}
.footer button:nth-child(2){
 margin-left: 60px;
}
.footer button:nth-child(4){
 height: 100%;
 position: absolute;
 right: 0;
 padding:0 20px;
 background-color: orange;
}
.footer>span{
 position: absolute;
 right: 100px;
}
.footer>span span{
 color: red;
}
.selected{
 background: url(../img/check.png) no-repeat;
 background-size: contain;
}

以上为所有的html和css文件代码。

【总结】

1、computed:此处用computed主要有两个作用。一是判断是否全选。如果全选则添加selected这一class,如果没有则不添加;二是计算选择的总商品数和总金额。当用户更改商品数量时,总商品数和总金额也随之改变。

2、return返回两个值:第一次接触function里边return的值是两个这种情况,这种要通过对象的属性访问方法。例如:

function add(a,b){
 var sum;
 var sub
 return{
 sum:a+b,
 sub:a-b
 }
 }
var obj = add(5,2);
console.log(obj.sum);
console.log(obj.sub);

3、js的数组方法filter():

filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。

注意: filter() 不会对空数组进行检测。
注意: filter() 不会改变原始数组。

array.filter(function(currentValue,index,arr), thisValue)
  • currentValue: 必须。当前元素的值
  • index: 可选。当前元素的索引值
  • arr:可选。当前元素属于的数组对象
  • thisValue:可选。对象作为该执行回调时使用,传递给函数,用作 “this” 的值。如果省略了 thisValue ,“this” 的值为 “undefined”

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

Vue.js 相关文章推荐
一篇超完整的Vue新手入门指导教程
Nov 18 Vue.js
Vue 打包的静态文件不能直接运行的原因及解决办法
Nov 19 Vue.js
在Vue中使用mockjs代码实例
Nov 25 Vue.js
vue 使用 sortable 实现 el-table 拖拽排序功能
Dec 26 Vue.js
vue实现登录功能
Dec 31 Vue.js
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
Jan 05 Vue.js
Vue实现图书管理案例
Jan 20 Vue.js
vue实现可拖拽的dialog弹框
May 13 Vue.js
Vue3如何理解ref toRef和toRefs的区别
Feb 18 Vue.js
VUE之图片Base64编码使用ElementUI组件上传
Apr 09 Vue.js
Vue实现小购物车功能
Dec 21 #Vue.js
vue监听滚动事件的方法
Dec 21 #Vue.js
vue el-upload上传文件的示例代码
Dec 21 #Vue.js
vue 在单页面应用里使用二级套嵌路由
Dec 19 #Vue.js
vue中如何添加百度统计代码
Dec 19 #Vue.js
vue 导航守卫和axios拦截器有哪些区别
Dec 19 #Vue.js
Vue——解决报错 Computed property &quot;****&quot; was assigned to but it has no setter.
Dec 19 #Vue.js
You might like
windows下PHP APACHE MYSQ完整配置
2007/01/02 PHP
PHP 服务器配置(使用Apache及IIS两种方法)
2009/06/01 PHP
php文件压缩之PHPZip类用法实例
2015/06/18 PHP
详解WordPress中调用评论模板和循环输出评论的PHP函数
2016/01/05 PHP
php 判断IP为有效IP地址的方法
2018/01/28 PHP
YII2框架中behavior行为的理解与使用方法示例
2020/03/13 PHP
javascript 动态生成私有变量访问器
2009/12/06 Javascript
javascript中String类的subString()方法和slice()方法
2011/05/24 Javascript
兼容IE、FireFox、Chrome等浏览器的xml处理函数js代码
2011/11/30 Javascript
jquery ajax jsonp跨域调用实例代码
2013/12/11 Javascript
JS文字球状放大效果代码分享
2015/08/19 Javascript
浅谈javascript的Array.prototype.slice.call
2015/08/31 Javascript
JS中Safari浏览器中的Date
2017/07/17 Javascript
JavaScript创建对象方法实例小结
2018/09/03 Javascript
[01:02:48]2018DOTA2亚洲邀请赛小组赛 A组加赛 Newbee vs Liquid
2018/04/03 DOTA
[43:24]VG vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python的迭代器和生成器
2015/07/29 Python
django 开发忘记密码通过邮箱找回功能示例
2018/04/17 Python
Python使用numpy模块创建数组操作示例
2018/06/20 Python
python实现感知器算法(批处理)
2019/01/18 Python
python dict 相同key 合并value的实例
2019/01/21 Python
python使用itchat模块给心爱的人每天发天气预报
2019/11/25 Python
python pymysql链接数据库查询结果转为Dataframe实例
2020/06/05 Python
使用darknet框架的imagenet数据分类预训练操作
2020/07/07 Python
详解Python中的路径问题
2020/09/02 Python
关于css中margin的值和垂直外边距重叠问题
2020/10/27 HTML / CSS
Java面向对象面试题
2016/12/26 面试题
考博自荐信
2013/10/25 职场文书
总经理助理岗位职责
2013/11/08 职场文书
工作睡觉检讨书
2014/02/25 职场文书
竞选部长演讲稿
2014/04/26 职场文书
群众路线剖析材料怎么写
2014/10/09 职场文书
党员反对四风思想汇报范文
2014/10/25 职场文书
小区环境卫生倡议书
2015/04/29 职场文书
2016党员干部反腐倡廉心得体会
2016/01/13 职场文书
git中cherry-pick命令的使用教程
2022/06/25 Servers