Vue.js搭建移动端购物车界面
更新时间：2020年06月28日 10:05:22 作者：fareise
这篇文章主要为大家详细介绍了Vue.js搭建移动端购物车界面，重点介绍基本结构和数据渲染，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文介绍了如何使用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全局事件总线$bus安装与应用,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-09-09
详解vue3.0 的 Composition API 的一种使用方法
这篇文章主要介绍了vue3.0 的 Composition API 的一种使用方法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-10-10
Vue Camera组件是一个用于在Web应用中使用摄像头的Vue插件,它提供了一些常见的功能和方法来控制摄像头和捕获图像或视频数据,本文给大家介绍Vue Camera组件的常见功能和使用方法,感兴趣的朋友一起看看吧2023-11-11
在Vue.js中可以使用Element UI库中的<el-upload>组件来实现多文件上传的功能,这篇文章主要给大家介绍了关于el-upload前端实现多文件上传功能的相关资料,需要的朋友可以参考下2024-07-07
这篇文章主要给大家介绍了关于前端Uniapp使用Vant打造Uniapp项目避坑的相关资料,Uniapp结合Vant可以快速构建跨平台移动应用,通过HBuilderX安装和配置Vant组件,解决了样式识别问题,并实现了组件的全局注册,需要的朋友可以参考下2024-11-11
最近工作中遇到了一个需求,需要利用echarts在地图上面标记点位,所下面这篇文章主要给大家介绍了关于如何利用Echarts根据经纬度给地图画点画线的相关资料,需要的朋友可以参考下2022-05-05
我们在前端开发中经常看到:visible.sync这种修饰符，很多人不知道这是干什么的，在使用ElementUI的时候，里面有个弹窗el-dialog组件的时候会有用到:visible.sync，今天小编带领大家学习下:visible.sync 的作用，感兴趣的朋友一起看看吧2022-11-11
在现代Web开发中,文件上传是一个常见而重要的需求,无论是在用户上传头像、文档或者其他类型的文件时,良好的用户体验都是至关重要的,在这篇博客中,我们将介绍如何使用Vue.js来实现文件上传功能,同时显示上传进度条,需要的朋友可以参考下2024-11-11
本篇文章主要介绍了关于vue.js组件数据流的问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
watch和computed都是以Vue的依赖追踪机制为基础的,当某一个依赖型数据发生变化的时候,所有依赖这个数据的相关数据会自动发生变化,即自动调用相关的函数,来实现数据的变动，这篇文章简单介绍下Vue中computed和watch的区别异同，感兴趣的朋友一起看看吧2022-12-12
最新评论