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 简单实现前端权限控制的示例
Dec 25 Vue.js
Vue中inheritAttrs的使用实例详解
Dec 31 Vue.js
详解为什么Vue中的v-if和v-for不建议一起用
Jan 13 Vue.js
vue动态设置路由权限的主要思路
Jan 13 Vue.js
vue form表单post请求结合Servlet实现文件上传功能
Jan 22 Vue.js
vue实现禁止浏览器记住密码功能的示例代码
Feb 03 Vue.js
vue+django实现下载文件的示例
Mar 24 Vue.js
使用vue-element-admin框架从后端动态获取菜单功能的实现
Apr 29 Vue.js
vue如何批量引入组件、注册和使用详解
May 12 Vue.js
Vue实现tab导航栏并支持左右滑动功能
Jun 28 Vue.js
vue实现滑动解锁功能
Mar 03 Vue.js
解决vue自定义组件@click点击失效问题
Apr 30 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
收音机频率指针指示不准确和灵敏度低问题
2021/03/02 无线电
通过html表格发电子邮件
2006/10/09 PHP
比较简单实用的使用正则三种版本的js去空格处理方法
2007/11/18 Javascript
jQuery 研究心得 取得属性的值
2007/11/30 Javascript
Javascript 兼容firefox的一些问题
2009/05/21 Javascript
js改变文章字体大小的实例代码
2013/11/27 Javascript
Javascript中使用A标签获取当前目录的绝对路径方法
2015/03/02 Javascript
AngularJS模块管理问题的非常规处理方法
2015/04/29 Javascript
javascript简单比较日期大小的方法
2016/01/05 Javascript
通过BootStrap-select插件 js jQuery控制select属性变化
2017/01/03 Javascript
基于JavaScript实现移动端无限加载分页
2017/03/27 Javascript
Webpack执行命令参数详解
2017/06/17 Javascript
nodejs实现一个word文档解析器思路详解
2018/08/14 NodeJs
详解vue移动端项目的适配(以mint-ui为例)
2018/08/17 Javascript
jQuery分组选择器简单用法示例
2019/04/04 jQuery
Python中实现的RC4算法
2015/02/14 Python
Python中用于去除空格的三个函数的使用小结
2015/04/07 Python
Python函数式编程指南(三):迭代器详解
2015/06/24 Python
Python发送form-data请求及拼接form-data内容的方法
2016/03/05 Python
python 根据正则表达式提取指定的内容实例详解
2016/12/04 Python
Python3.4实现远程控制电脑开关机
2018/02/22 Python
教你用Python创建微信聊天机器人
2020/03/31 Python
python+unittest+requests实现接口自动化的方法
2018/11/29 Python
python按照多个条件排序的方法
2019/02/08 Python
Python之lambda匿名函数及map和filter的用法
2019/03/05 Python
Python生成验证码、计算具体日期是一年中的第几天实例代码详解
2019/10/16 Python
Python使用Opencv实现图像特征检测与匹配的方法
2019/10/30 Python
PyQt5 如何让界面和逻辑分离的方法
2020/03/24 Python
Herve Leger官网:标志性绷带连衣裙等
2018/12/26 全球购物
全球高级音频和视频专家:HiDef Lifestyle
2019/08/02 全球购物
美国领先的机场停车聚合商:Airport Parking Reservations
2020/02/28 全球购物
简述进程的启动、终止的方式以及如何进行进程的查看
2014/02/20 面试题
数学检讨书1000字
2014/02/24 职场文书
2015届本科毕业生自我鉴定
2014/09/27 职场文书
2015年度优秀员工自荐书
2015/03/06 职场文书
2015年少先队活动总结
2015/03/25 职场文书