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

站长资源 2024/11/26 佚名

7 1538 7

DDR爱好者之家 Design By 杰米

本文介绍了如何使用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="/UploadFiles/2021-04-02/item.productImage">

对应的关键注释在代码中给出，下面结合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="/UploadFiles/2021-04-02/item.productImage">

通过v-for指令，遍历了变量productList中的数据，并在内部的HTML中调用。利润item.productImage获取对应图片URL地址；item.productName获取商品名称等。这样，就自动生成了一个商品信息列表。
下一部分将介绍逻辑代码的编写。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

Vue.js,移动端,购物车

DDR爱好者之家 Design By 杰米

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

DDR爱好者之家 Design By 杰米

评论“Vue.js搭建移动端购物车界面”

暂无评论...

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

2024年11月26日

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

JavaScript实现修改伪类样式

Vue实现购物车场景下的应用

评论“Vue.js搭建移动端购物车界面”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接