好资源导航 » 文章资讯 » Vue.js搭建移动端购物车界面

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

2023-09-20 10:50:05 68

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

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

HTML部分

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







购物车

商品信息
商品金额
商品数量
总金额
编辑

赠送:

- + 有货

全选

取消全选

Itemtotal:{{totalMoney|money('元')}}

结账

关闭

你确认删除此订单信息吗?

Yes No

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

一、Vue组件基本格式

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

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

在JS代码中，使用newVue即可声明一个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中的数据，代码如下：










{{item.productName}}



赠送:

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

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

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

返回顶部
514930285
czq8825@qq.com

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

热门推荐

随机推荐