Vue如何实现分页效果与购物车功能

这篇文章将为大家详细讲解有关Vue如何实现分页效果与购物车功能，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

创新互联公司专注于企业成都全网营销、网站重做改版、红岗网站定制设计、自适应品牌网站建设、html5、商城网站开发、集团公司官网建设、成都外贸网站建设、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为红岗等各大城市提供网站开发制作服务。

分页组件

首先来创建项目：

分页组件，做项目不要写动手写代码，要想想业务逻辑，怎么写，如何写才是最好的呈现方式，做项目不急，要先想好整体的框架，从底层一开始最想要的是什么做起。

先动代码，边做边想是会出问题的，而且还会卡壳，让你半路出家的。

分页组件，你觉得要什么内容，是页面？如果不懂可以去看看别人的分页是怎么做的，考虑业务逻辑，整体出发去思考问题。要不然我去百度看看，别人的分页效果。

Vue如何实现分页效果与购物车功能

看了后做不出来也是没有关系的，我们呢？

可以从底部出发，从最小的逻辑开始，从做这个需要考虑到什么想起，一步一步来，做好局部的功能，这个功能做好了，才去做另一个功能或者页面哦~

分页组件我们需要的字段有哪些？

你想想，当前页，是不是有，curpage当前页，每页的大小，pagesize，总的页数，total，等等，考虑不到的，没关系看看别人的有什么，想好后才写代码，那才快。

不说无用，先创建项目：

Vue如何实现分页效果与购物车功能

写的分页组件

props: ['total'],
data: function() {
 return {
 page: 1, // 当前页码
 pagesize: 10 // 每一页的记录数
 });
},

是不是只能想到那么多呢？那就先写那么多，然后再想想需要什么：

总页码 = Math.ceil(总记录数/每一页记录数）

总页码数，7页，或6页，当前是向上取整，每一页记录数10页，总记录数，总的多少页。如80除10页，8页。

math.ceil(x)返回大于等于参数x的最小整数,即对浮点数向上取整.

单击事件，切换不同的页面的效果。


分页组件
//父

@click.stop 阻止事件冒泡

@click.prevent 阻止事件的默认行为，

分页效果大致如此。

购物车组件

购物车组件，是做项目不可少的，面试也是，动不动就叫我上机写个购物车的组件，写就写咯，购物车时做商城项目不可少的，写好购物车组件会很方便，简书代码的重复性。

那么想想购物车组件有什么内容呢？

购物车，是不是有：商品名称，单价，增加删减单品的数量呢？还有就是订单总金额数呢？这些是必不可少的哦！！！

Vue如何实现分页效果与购物车功能

购物车组件不知道有什么也是可以去看看别人的先，看看有什么，购物车组件一般包含显示商品的名称，单价，购买的数量以及订单总金额，通过增加或减少商品的购买的数据，并同步更改订单的总金额。

总金额同步，我们能想到的是用什么指令，是不是v-model

v-model指令的双向绑定

// v-model指令双向绑定
updateCount: function() {
 // 触发input事件
 this.$emit('input', this.count);
}

vue中监听input输入值变化的事件，原生事件；

this.$emit()，是触发器，用于父子组件的传值。

this.$emit(事件,值)

父组件：

子组件：

当商品的购买数量发生变化时，订单总金额也再变。

这个时候应该想到computed属性：

// computed属性定义下的：

amount: function() {
 var money = 0;
 this.goodslist.forEach(goods => {
 money += parseInt(goods.count) * parseInt(goods.price);
 });
 return money;
}

v-model双向绑定实际上是通过子组件中$emit方法派发的input事件，父组件监听input事件中传递的value值，并存储在父组件data中，然后父组件通过prop的形式传递给子组件value值，在子组件中绑定Input的value属性。

代码：

// 父组件

:value = "value"

子组件使用监听事件使用

emit(eventName)触发事件

购物车最终代码：



商品名称：{{goods.name}}
单价:{{goods.price}}

订单总金额：{{amount}}元

- +

关于“Vue如何实现分页效果与购物车功能”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。

Vue如何实现分页效果与购物车功能

分页组件

{{message}}

其他资讯