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

前端之家收集整理的这篇文章主要介绍了Vue.js搭建移动端购物车界面前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

HTML部分

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

购物车
  <!-- table --> 
  <div class="item-list-wrap"&gt; 
   <divclassdivclass="cart-item"&gt; 
    <divclassdivclass="cart-item-head"&gt; 
     <ul> 
      <li>商品信息</li> 
      <li>商品金额</li> 
      <li>商品<a href="https://www.jb51.cc/tag/shuliang/" target="_blank" class="keywords">数量</a></li> 
      <li>总金额</li> 
      <li>编辑</li> 
     </ul> 
    </div> 
    <ulclassulclass="cart-item-list"&gt; 
     <!--productList在Vue组件中的data定义,包含全部数据,使用v-for进行遍历显示--> 
     <li v-for="item inproductList"&gt; 
      <divclassdivclass="cart-tab-1"&gt; 
       <divclassdivclass="cart-item-check"&gt; 
        <!--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)"&gt; 
         <svgclasssvgclass="icon icon-ok"&gt;<usexlink:hrefusexlink:href="#icon-ok"&gt;</use></svg> 
        </a> 
       </div> 
       <divclassdivclass="cart-item-pic"&gt; 
        <imgv-bind:srcimgv-bind:src="item.productImage" alt="烟"&gt; 
       </div> 
       <divclassdivclass="cart-item-title"&gt; 
        <divclassdivclass="item-name"&gt;{{ item.productName }}</div> 
       </div> 
       <divclassdivclass="item-include"&gt; 
        <dl> 
         <dt>赠送:</dt> 
         <ddv-forddv-for="part in item.parts"v-text="part.partsName"&gt;</dd> 
        </dl> 
       </div> 
      </div> 
      <divclassdivclass="cart-tab-2"&gt; 
       <!--使用过滤器,|后面加Vue组件filter中定义的过滤器名称--> 
       <divclassdivclass="item-price"&gt;{{ item.productPrice |formatMoney}}</div> 
      </div> 
      <divclassdivclass="cart-tab-3"&gt; 
       <divclassdivclass="item-quantity"&gt; 
        <divclassdivclass="select-self select-self-open"&gt; 
         <divclassdivclass="quantity"&gt; 
          <!--绑定changeMoney()方法,调整商品数量--> 
          <ahrefahref="javascript:;"@click="changeMoney(item,-1)"&gt;-</a> 
          <inputtypeinputtype="text" :value="item.productQuantity" disabled> 
          <ahrefahref="javascript:;"@click="changeMoney(item,1)"&gt;+</a> 
         </div> 
        </div> 
        <divclassdivclass="item-stock"&gt;有货</div> 
       </div> 
      </div> 
      <divclassdivclass="cart-tab-4"&gt; 
       <divclassdivclass="item-price-total"&gt;{{ item.productPrice*item.productQuantity| money('元')}}</div> 
      </div> 
      <div class="cart-tab-5"&gt; 
       <divclassdivclass="cart-item-operation"&gt; 
        <!--delConfirm方法控制删除时的弹框显示状态--> 
        <ahrefahref="javascript:void 0" class="item-edit-btn"@click="delConfirm(item)"&gt; 
         <svg class="iconicon-del"&gt;<use xlink:href="#icon-del"&gt;</use></svg> 
        </a> 
       </div> 
      </div> 
     </li> 
    </ul> 
   </div> 
  </div> 

  <!-- footer --> 
  <div class="cart-foot-wrap"&gt; 
   <divclassdivclass="cart-foot-l"&gt; 
    <divclassdivclass="item-all-check"&gt; 
     <ahrefahref="javascript:void 0"&gt; 
      <spanclassspanclass="item-check-btn" :class="{'check':checkAllFlag}"@click="checkAll(true)"&gt; 
       <svg class="iconicon-ok"&gt;<usexlink:hrefusexlink:href="#icon-ok"&gt;</use></svg> 
      </span> 
      <span v-show="!checkAllFlag"&gt;全选</span> 
     </a> 
    </div> 
    <divclassdivclass="item-all-del"&gt; 
     <ahrefahref="javascript:void 0" class="item-del-btn"@click="checkAll(false)"&gt; 
      <spanv-showspanv-show="checkAllFlag"&gt;取消全选</span> 
     </a> 
    </div> 
   </div> 
   <divclassdivclass="cart-foot-r"&gt; 
    <divclassdivclass="item-total"&gt; 
     <!--totalMoney是商品总金额,在Vue组件中通过方法被修改--> 
     Item total: <span class="total-price"&gt;{{totalMoney| money('元')}}</span> 
    </div> 
    <divclassdivclass="next-btn-wrap"&gt; 
     <ahrefahref="address.html" class="btn btn--red" style="width:200px"&gt;结账</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}"&gt; 
 <div class="md-modal-inner"&gt; 
  <div class="md-top"&gt; 
   <!--关闭按钮,通过改变delFlag值控制弹框状态--> 
   <buttonclassbuttonclass="md-close" @click="delFlag = false"&gt;<a href="https://www.jb51.cc/tag/guanbi/" target="_blank" class="keywords">关闭</a></button> 
  </div> 
  <div class="md-content"&gt; 
   <divclassdivclass="confirm-tips"&gt; 
    <pidpid="cusLanInfo"&gt;你确认<a href="https://www.jb51.cc/tag/shanchu/" target="_blank" class="keywords">删除</a>此订单信息吗?</p> 
   </div> 
   <div class="btn-wrapcol-2"&gt; 
    <!--选择yes则调用delProduct删除元素--> 
    <button class="btnbtn--m" id="btnModalConfirm"@click="delProduct"&gt;Yes</button> 
    <button class="btnbtn--m btn--red" id="btnModalCancel"@click="delFlag=false"&gt;No</button> 
   </div> 
  </div> 
 </div> 
</div> 
<!--遮罩层,整个都是通过delFlag进行控制的,v-if根据表达式的真假条件渲染元素--> 
<div class="md-overlay"v-if="delFlag"&gt;</div> 

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

一、Vue组件基本格式

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

在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代码和注释如下:

方法用来加载数据,并将数据存储在这个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中的数据,代码如下:

赠送:

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/vue/35021.html

猜你在找的Vue相关文章