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

2024-11-28 13:42:15

本文介绍了如何使用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获取商品名称等。这样，就自动生成了一个商品信息列表。

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

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

vuejs手把手教你写一个完整的购物车实例代码

由于我们公司是主营业务是海淘,所以每个项目都是类似淘宝天猫之类的商城,那么购物车就是一个重点开发功能模块.介于之前我都是用jq来写购物车的,这次就用vuejs来写一个购物车.下面我就从全选,数量控制器,运费,商品金额计算等方法来演示一下一个能用在实际场景的购物车是怎么做出来的以及记录一下这次用vuejs踩过的坑. 1.一层数据结构-全选下面这段代码和vuejs官网里面checkbox绑定很像.不明白的可以直接上vuejs官网看看. <!DOCTYPE html> <html lang=
用vue和node写的简易购物车实现

项目介绍这是用vue写前端,用node来接收前端发来的请求,然后进行相应的数据操作,例如数据的存取和删除等.这是个人的练习项目,目前功能做的比较简单,主要是展示商品列表,把商品加入购物车,从购物车删除商品三个小功能. 搭建本地环境因为是用vue,需要用babel把es6语法转为es5语法. 1.配置.babelrc文件 { "presets": [ "es2015", "stage-2" ], "plugins": [&q
基于Vuejs实现购物车功能

本文实例为大家分享了Vuejs购物车实现代码,供大家参考,具体内容如下 html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>我的vue购物车</title> <link rel="stylesheet" href="css/bootstrap.min.css&q
Vue2.0实现购物车功能

简介 vue.js是由华人尤雨溪开发的一套MVVM框架.vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统,它非常适用于具有复杂交互逻辑的前端应用,如一些单页应用程序,有很多表单操作,页面中的内容需要根据用户的操作动态变化. 主要特性: 1.响应式的数据绑定 2.组件化开发 3.Virtual DOM 开发准备工具我使用的编辑器是sublime text3,首先要先安装个插件sublimeServer,用来搭建一个http服务器,使用详情请查看这篇博
vue实现商城购物车功能

本文实例为大家分享了vue实现商城购物车功能的具体代码,供大家参考,具体内容如下首先,先上最终的效果图效果并不是很好看,但是这不是重点. 首先,我们先看下布局: <template> <div class="shopcar" id="demo04"> <div class="header-title"> <h3>购物车</h3> </div> <div class=
vue购物车插件编写代码

本文实例为大家分享了vue购物车插件的具体代码,供大家参考,具体内容如下先上效果图下面相关代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hello MUI</title> <meta name="viewport" content="width=device-width, initial-sca
vue实现商城上货组件简易版

本文实例为大家分享了vue实现商城上货组件的具体代码,供大家参考,具体内容如下 0.结果放前面点击查看效果带脚手架的源码加个Star后,fork下来. 然后在控制台,先输入npm install安装依赖,再输入npm run dev运行查看效果 1.先列需求一切开发都是基于需求做的,所以需求先行,根据需求设计功能. 需求如下: 上货商品有多个属性类别:(例如:颜色.尺寸.型号) 每个类别有多个子属性:(例如:白色.绿色.金色) 每个商品必然具备每个类别的其中一个子属性: 除此之外还有额外
Vuejs实现购物车功能

开始更新前端框架Vue.JS的相关博客. 功能概述学习了Vue.JS的一些基础知识,现在利用指令.数据绑定这些基础知识开发一个简单的购物车功能.功能要点如下: (1)展示商品的名称.单价和数量: (2)商品的数量可以增加和减少: (3)购物车的总价要实时更新,即数量发生变动,总价也要相应的改变: (4)商品可以从购物车中移除: (5)具有选择功能,只计算选中的商品的总价. 上一张截图,如下: 代码代码分成三部分,分别是HTML.JS.CSS.关键的是HTML和JS. HTML <!DOCTY
Vue实现购物车功能

效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="external nofollow" /> &l
Vue实现购物车场景下的应用

本文实例为大家分享了Vue在购物车场景下的应用,供大家参考,具体内容如下购物车场景需求: 1. 商品.店铺.购物车的选择 2. 商品删除关键代码测试数据 var _list = [{ checked: false, goods: [{ name: "商品1", price: 23, checked: false }] }, { checked: false, goods: [{ name: "商品2", price: 20, checked: false },

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

相关推荐

随机推荐