首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

Vue.js搭建移动端购物车界面

Posted in Javascript onJune 28, 2020

本文介绍了如何使用Vue搭建一个移动端购物车界面，最终实现的功能包括：

1. 选择要最终购买的物品
2. 选择每件物品购买的数量
3.  实时更新所选择物品的总价格 

HTML部分

首先给出HTML部分代码和注释，显示了整个界面的结构。

<body> 
 <div class="checkout"> 
 <div id="app"> 
 <div class="container"> 
  <div class="cart"> 
  <div class="checkout-title"> 
  <span>购物车</span> 
  </div> 
 
  <!-- table --> 
  <div class="item-list-wrap"> 
  <divclassdivclass="cart-item"> 
  <divclassdivclass="cart-item-head"> 
   <ul> 
   <li>商品信息</li> 
   <li>商品金额</li> 
   <li>商品数量</li> 
   <li>总金额</li> 
   <li>编辑</li> 
   </ul> 
  </div> 
  <ulclassulclass="cart-item-list"> 
   <!--productList在Vue组件中的data定义，包含全部数据，使用v-for进行遍历显示--> 
   <li v-for="item inproductList"> 
   <divclassdivclass="cart-tab-1"> 
   <divclassdivclass="cart-item-check"> 
   <!--Vue2.0中想为HTML标签绑定属性，必须使用v-bind:，绑定内容为对象，这里为a标签绑定check属性，属性值为item中的checked值--> 
   <!--@click是v-on:click的缩写，为这个按钮绑定了点击事件，对应Vue组件methods中定义的方法selectProduct--> 
   <ahrefahref="javascript:void 0" class="item-check-btn"v-bind:class="{'check': item.checked}"@click="selectedProduct(item)"> 
    <svgclasssvgclass="icon icon-ok"><usexlink:hrefusexlink:href="#icon-ok"></use></svg> 
   </a> 
   </div> 
   <divclassdivclass="cart-item-pic"> 
   <imgv-bind:srcimgv-bind:src="item.productImage" alt="烟"> 
   </div> 
   <divclassdivclass="cart-item-title"> 
   <divclassdivclass="item-name">{{ item.productName }}</div> 
   </div> 
   <divclassdivclass="item-include"> 
   <dl> 
    <dt>赠送:</dt> 
    <ddv-forddv-for="part in item.parts"v-text="part.partsName"></dd> 
   </dl> 
   </div> 
   </div> 
   <divclassdivclass="cart-tab-2"> 
   <!--使用过滤器，|后面加Vue组件filter中定义的过滤器名称--> 
   <divclassdivclass="item-price">{{ item.productPrice |formatMoney}}</div> 
   </div> 
   <divclassdivclass="cart-tab-3"> 
   <divclassdivclass="item-quantity"> 
   <divclassdivclass="select-self select-self-open"> 
    <divclassdivclass="quantity"> 
    <!--绑定changeMoney()方法，调整商品数量--> 
    <ahrefahref="javascript:;"@click="changeMoney(item,-1)">-</a> 
    <inputtypeinputtype="text" :value="item.productQuantity" disabled> 
    <ahrefahref="javascript:;"@click="changeMoney(item,1)">+</a> 
    </div> 
   </div> 
   <divclassdivclass="item-stock">有货</div> 
   </div> 
   </div> 
   <divclassdivclass="cart-tab-4"> 
   <divclassdivclass="item-price-total">{{ item.productPrice*item.productQuantity| money('元')}}</div> 
   </div> 
   <div class="cart-tab-5"> 
   <divclassdivclass="cart-item-operation"> 
   <!--delConfirm方法控制删除时的弹框显示状态--> 
   <ahrefahref="javascript:void 0" class="item-edit-btn"@click="delConfirm(item)"> 
    <svg class="iconicon-del"><use xlink:href="#icon-del"></use></svg> 
   </a> 
   </div> 
   </div> 
   </li> 
  </ul> 
  </div> 
  </div> 
 
  <!-- footer --> 
  <div class="cart-foot-wrap"> 
  <divclassdivclass="cart-foot-l"> 
  <divclassdivclass="item-all-check"> 
   <ahrefahref="javascript:void 0"> 
   <spanclassspanclass="item-check-btn" :class="{'check':checkAllFlag}"@click="checkAll(true)"> 
   <svg class="iconicon-ok"><usexlink:hrefusexlink:href="#icon-ok"></use></svg> 
   </span> 
   <span v-show="!checkAllFlag">全选</span> 
   </a> 
  </div> 
  <divclassdivclass="item-all-del"> 
   <ahrefahref="javascript:void 0" class="item-del-btn"@click="checkAll(false)"> 
   <spanv-showspanv-show="checkAllFlag">取消全选</span> 
   </a> 
  </div> 
  </div> 
  <divclassdivclass="cart-foot-r"> 
  <divclassdivclass="item-total"> 
   <!--totalMoney是商品总金额，在Vue组件中通过方法被修改--> 
   Item total: <span class="total-price">{{totalMoney| money('元')}}</span> 
  </div> 
  <divclassdivclass="next-btn-wrap"> 
   <ahrefahref="address.html" class="btn btn--red" style="width:200px">结账</a> 
  </div> 
  </div> 
  </div> 
  </div> 
 </div> 
 
 <!--绑定一个md-show类，通过delFlag变量控制这个类，这个类可以让弹框显示或隐藏--> 
 <div class="md-modal modal-msg md-modal-transition"id="showModal" v-bind:class="{'md-show':delFlag}"> 
  <div class="md-modal-inner"> 
  <div class="md-top"> 
  <!--关闭按钮，通过改变delFlag值控制弹框状态--> 
  <buttonclassbuttonclass="md-close" @click="delFlag = false">关闭</button> 
  </div> 
  <div class="md-content"> 
  <divclassdivclass="confirm-tips"> 
  <pidpid="cusLanInfo">你确认删除此订单信息吗?</p> 
  </div> 
  <div class="btn-wrapcol-2"> 
  <!--选择yes则调用delProduct删除元素--> 
  <button class="btnbtn--m" id="btnModalConfirm"@click="delProduct">Yes</button> 
  <button class="btnbtn--m btn--red" id="btnModalCancel"@click="delFlag=false">No</button> 
  </div> 
  </div> 
  </div> 
 </div> 
 <!--遮罩层，整个都是通过delFlag进行控制的，v-if根据表达式的真假条件渲染元素--> 
 <div class="md-overlay"v-if="delFlag"></div> 
 
 </div> 
 </div> 
</body>

对应的关键注释在代码中给出，下面结合Vue.js的代码，对主要部分进行解释。 

一、Vue组件基本格式

一个Vue组件的基本代码如下：

new Vue({ 
 el:'#app', 
 data: {}, 
 filters: {}, 
 mounted: function() {}, 
 methods: {} 
});

在JS代码中，使用new Vue即可声明一个Vue组件。Vue组件主要包括以下几个字段。
1.  el字段：el字段用来定义该组件在HTML中的哪个位置生效，需要传入HTML中某个元素的id值。这里传入了#app，表示HTML中id为app的元素内部都是这个Vue组件的作用范围。
2. data字段：data字段定义了Vue组件中的数据，可能在HTML中进行渲染。在本应用中，商品的价格、名称、图片链接等信息，都是使用Vue组件中data字段内的数据进行渲染的。
3. filter字段：filter字段是一个过滤器，在本应用中，针对价格等需要格式化的文本，就可以使用filter进行过滤。
4. mounted字段：mounted字段通常定义一个方法，这个方法将在页面加载完成时自动执行，在React等框架中都有类似的机制。
5. method字段：method字段用来定义Vue组件中需要用到的方法，这个字段的内容往往是需要投入时间最多的部分，例如页面中选择商品、增加数量等逻辑，都是在这个字段中进行编辑的。
以上就是一个vue组件的主要组成部分，下面对各个部分功能的代码编写进行简要介绍。 

二、数据渲染

数据渲染部分，要渲染的数据都存放在data中。每一个商品的信息都被模拟存储在了cart.json的文件中。我们可以实现数据自动加载，基本思路是：在method字段中定义一个方法，用来加载cart.json中的数据，并将其存放到data字段中定义的对应变量中。在mouted字段中，自动调用这个方法。这样就实现了页面加载完成后自动加载数据。对应的JS代码和注释如下：

data: { 
 //存放商品json数据信息 
 productList: [] 
 } 
methods: { 
 //cartView()方法用来加载数据，并将数据存储在这个Vue组件中的productList变量中 
 cartView: function() { 
 var _this = this; 
 //使用vue-resource模块加载数据，类似Jquery中的AJAX，返回数据存放在res.body中 
 this.$http.get("data/cartData.json", {"id":123}).then(function(res) { 
  _this.productList =res.body.result.list; 
  // _this.totalMoney = res.body.result.totalMoney; 
 }); 
} 
 } 
 mounted: function() { 
 //执行代码放在$nextTick中，保证页面结构加载完毕后再执行函数 
 this.$nextTick(function() { 
 this.cartView(); //使用this调用methods中定义的cartView()方法 
 }) 
 }

完成了这部分代码，所有商品的数据就存放在了组件中变量名为productList的字段中。
在前端HTML部分的进行调用，需要使用v-for指令。这个指令用来循环遍历Vue中的数据，代码如下：

<ul class="cart-item-list"> 
 <li v-for="item in productList"> 
 <div class="cart-tab-1"> 
 <div class="cart-item-check"> 
 </div> 
 <div class="cart-item-pic"> 
 <img v-bind:src="item.productImage" alt="烟"> 
 </div> 
 <div class="cart-item-title"> 
 <div class="item-name">{{ item.productName}}</div> 
 </div> 
 <div class="item-include"> 
 <dl> 
  <dt>赠送:</dt> 
  <dd v-for="part in item.parts"v-text="part.partsName"></dd> 
 </dl> 
 </div> 
 </div> 
</ul>

通过v-for指令，遍历了变量productList中的数据，并在内部的HTML中调用。利润item.productImage获取对应图片URL地址；item.productName获取商品名称等。这样，就自动生成了一个商品信息列表。

下一部分将介绍逻辑代码的编写。

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

Vue.js搭建移动端购物车界面

- Author -

fareise

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jquery判断浏览器类型的代码
Nov 05 Javascript
javascript 使td内容不换行不撑开
Nov 29 Javascript
javascript日期计算实例分析
Jun 29 Javascript
jquery自定义插件开发之window的实现过程
May 06 Javascript
基于iScroll实现下拉刷新和上滑加载效果
Jul 18 Javascript
React Native中NavigatorIOS组件的简单使用详解
Jan 27 Javascript
解决微信小程序防止无法回到主页的问题
Sep 28 Javascript
彻底揭秘keep-alive原理(小结)
May 05 Javascript
详解express使用vue-router的history踩坑
Jun 05 Javascript
html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片
Jan 12 Javascript
uin-app+mockjs实现本地数据模拟
Aug 26 Javascript
Vue实现简易购物车页面
Dec 30 Vue.js
Vue实现购物车场景下的应用
Nov 27 #Javascript
javascript字体颜色控件的开发 JS实现字体控制
Nov 27 #Javascript
vue购物车插件编写代码
Nov 27 #Javascript
Vue.js devtool插件安装后无法使用的解决办法
Nov 27 #Javascript
微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法
Nov 27 #Javascript
vue2实现可复用的轮播图carousel组件详解
Nov 27 #Javascript
让bootstrap的carousel支持滑动滚屏的实现代码
Nov 27 #Javascript
openGauss(1) JDBC(3) 太阳码(1) 变量提升(1) cypress(1) Eclipse(1) ant design(2) form表单(1) pdf(1) 弹窗(1)
You might like
PHP中foreach()用法汇总
2015/07/02 PHP
PHP实现权限管理功能示例
2017/09/22 PHP
PHP实现的多维数组排序算法分析
2018/02/10 PHP
php将从数据库中获得的数据转换成json格式并输出的方法
2018/08/21 PHP
PHP基于cookie实现统计在线人数功能示例
2019/01/16 PHP
JavaScript 监听textarea中按键事件
2009/10/08 Javascript
纯javascript模仿微信打飞机小游戏
2015/08/20 Javascript
Vue列表页渲染优化详解
2017/07/24 Javascript
JavaScript中的FileReader图片预览上传功能实现代码
2017/07/24 Javascript
对于input 框限定输入值为浮点型的js代码
2017/09/25 Javascript
zTree 树插件实现全国五级地区点击后加载的示例
2018/02/05 Javascript
vue mint-ui tabbar变组件使用
2018/05/04 Javascript
vue项目中使用vue-layer弹框插件的方法
2020/03/11 Javascript
[01:45]IMBATV TI4前线报道－选手到达
2014/07/07 DOTA
[40:17]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第一场
2018/04/06 DOTA
简洁的十分钟Python入门教程
2015/04/03 Python
python生成器generator用法实例分析
2015/06/04 Python
使用XML库的方式,实现RPC通信的方法(推荐)
2017/06/14 Python
Python基于机器学习方法实现的电影推荐系统实例详解
2019/06/25 Python
Python实现K折交叉验证法的方法步骤
2019/07/11 Python
flask 实现上传图片并缩放作为头像的例子
2020/01/09 Python
django rest framework serializer返回时间自动格式化方法
2020/03/31 Python
如何利用python读取micaps文件详解
2020/10/18 Python
Html5移动端适配IphoneX等机型的方法
2019/06/25 HTML / CSS
趣天网日本站：Qoo10 JP
2019/09/18 全球购物
Linux如何命名文件--使用文件名时应注意
2014/05/29 面试题
文明学生事迹材料
2014/01/29 职场文书
工作表现自我评价
2014/02/08 职场文书
政治学求职信
2014/06/03 职场文书
教师师德考核自我评价
2014/09/13 职场文书
印刷技术专业自荐信
2014/09/18 职场文书
2015年打非治违工作总结
2015/04/02 职场文书
2015年教学副校长工作总结
2015/07/22 职场文书
Python实战之用tkinter库做一个鼠标模拟点击器
2021/04/27 Python
Python编程源码报错解决方法总结经验分享
2021/10/05 Python
win10音频服务未响应怎么解决?win10音频服务未响应未修复的解决方法
2022/08/14 数码科技