Vue分页效果与购物车功能


Posted in Javascript onDecember 13, 2019

分页组件

首先来创建项目:

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

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

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

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的最小整数,即对浮点数向上取整.

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

<div id="app">
<h1>分页组件</h1>
//父
<page-component :total="total"></page-component>
</div>

<template id="page-component">
 <ul class="pagination">
 <li :class="p == page ? 'page-item active' : 'page-item'"
 v-for="p in pagecount">
 <a href="#" rel="external nofollow" class="page-link" @click.prevent="page=p">
 {{p}}
 </a>
 </li>
 </ul>
 </template>

@click.stop 阻止事件冒泡

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

<script src="vue.js"> </script>
<script>
// 定义组件
const PageComponent = {
 name: 'PageComponent',
 template: '#page-component',
 props: ['total'],
 
 data: function() {
 return {
 page: 1, // 当前页码
 pagesize: 10 // 每一页的记录数
 };
 },
 
 computed: {
 pagecount: function() {
 // 总页数
 return Math.ceil(this.total / this.pagesize);
 }
 }
 
};

// 创建Vue实例对象
const app = new Vue({
 el: '#app',
 data: {
 total: 35
 },
 
 components: {
 PageComponent
 }
 
});
</script>

分页效果大致如此。

购物车组件

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

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

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

Vue分页效果与购物车功能

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

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

v-model指令的双向绑定

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

vue中监听input输入值变化的事件,原生事件;

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

this.$emit(事件,值)

父组件:

<Group title="用户名" v-model="username"></Group>

子组件:

<template>
 <div>
  <div class="group">
   <label>{{title}}</label>
   <input type="text" placeholder="请输入" @input="changeData()" v-model="val">
  </div>
 </div>
</template>

<script>
export default {
 props:["title"],
 data () {
  return {
   val:""
  }
 },
 methods:{
  changeData:function(){
   this.$emit('input',this.val);
  }
 }
}
</script>

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

这个时候应该想到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属性。

代码:

// 父组件
<myDa :value="value" @input="value=$event"></my-comp>

:value = "value"

<input type="text" @input="$emit('input', $event.target.value)" :value="value">

子组件使用监听事件使用

emit(eventName)触发事件

购物车最终代码:

<div id="app">
<div v-for="goods in goodslist">
<p>商品名称:{{goods.name}}</p>
<p>单价:{{goods.price}}</p>
<cart-component v-model="goods.count">
</cart-component>
<hr>
</div>

<div>

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

</div>
</div>

<template id="cart-component">
<div class="cart">
<button @click="count--; updateCount();">
-
</button>

<input type="text" v-model="count" 
@input=updateCount()">

<button @click="count++; updateCount();"> 
+ 
</button>
</div>
</template>

<script>
// 定义组件
const CartComponent = {
 name: 'Cart',
 template: '#cart-component',
 // 在组件中不可直接修改props数据
 props: ['value'],
 data: function() {
 return {
 count: this.value
 };
 },
 methods: {
 // v-model指令双向绑定,修改父组件内容
 updateCount: function() {
 // 触发input事件
 this.$emit('input',this.count);
 }
 }
};

// 创建vue实例对象
const app = new Vue({
 el: '#app',
 data: {
 goodslist; [{
 name: 'apple',
 price: 2,
 count: 2
 },{
 name: 'dada',
 price: 222222222222,
 count: 0
 }]
 },
 
 computed: {
 // 当前订单总金额
 amount: function(){
 var money=0
 this.goodslist.forEach(goods=>{
 money += pareseInt(goods.count) * parseInt(goods.price);
 });
 return money;
 }
 },
 components: {
 CartComponent
 }
});
</script>

vue:自定义组件中v-model以及父子组件的双向绑定

<div id="app">
 <p>{{message}}</p>
 <input type="text" v-model='message'>
</div>
<script>
 var vueApp = new Vue({
  el:'#app',
  data:{
   message:"我其实是一个语法糖"
  }
 })
</script>
<div id="app">
 <p>{{message}}</p>
 <input type="text" v-bind:value='message' @input='message = $event.target.value'>
</div>
<script>
 var vueApp = new Vue({
  el: '#app',
  data: {
   message: "我其实是一个语法糖"
  }
 })
</script>

以下两种约等于:

<custom v-model='something'></custom>
<custom :value="something" @input="value => { something = value }"></custom>
<div id="app">
 <h1>{{message}}</h1>
 <test-model v-model='message'></test-model>
</div>
<script>
 Vue.component('test-model', {
  template: ` <input v-bind:value='value'
     v-on:input="$emit('input', $event.target.value)">`,
 })
 var vueApp = new Vue({
  el: '#app',
  data: {
   message: '测试数据'
  },
 })
</script>

vue实际中的应用开发就到此结束了,后续敬请期待!!!

总结

以上所述是小编给大家介绍的Vue分页效果与购物车功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
JQuery 引发两次$(document.ready)事件
Jan 15 Javascript
js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)
Nov 09 Javascript
js如何改变文章的字体大小
Jan 08 Javascript
JS实现获取图片大小和预览的方法完整实例【兼容IE和其它浏览器】
Apr 24 Javascript
Angular.Js中过滤器filter与自定义过滤器filter实例详解
May 08 Javascript
JavaScript之Map和Set_动力节点Java学院整理
Jun 29 Javascript
在vue里面设置全局变量或数据的方法
Mar 09 Javascript
解决koa2 ctx.render is not a function报错问题
Aug 07 Javascript
react native基于FlatList下拉刷新上拉加载实现代码示例
Sep 30 Javascript
Javascript 实现 Excel 导入生成图表功能
Oct 22 Javascript
微信小程序前端promise封装代码实例
Aug 24 Javascript
如何用JS实现网页瀑布流布局
Apr 24 Javascript
如何在微信小程序中存setStorage
Dec 13 #Javascript
在微信小程序中使用mqtt服务的方法
Dec 13 #Javascript
微信小程序之左右布局的实现代码
Dec 13 #Javascript
vue实现输入一位数字转汉字功能
Dec 13 #Javascript
小程序登录之支付宝授权的实现示例
Dec 13 #Javascript
小程序使用wxs解决wxml保留2位小数问题
Dec 13 #Javascript
微信小程序点击保存图片到本机功能
Dec 13 #Javascript
You might like
解决GD中文乱码问题
2007/02/14 PHP
PHP图像处理之使用imagecolorallocate()函数设置颜色例子
2014/11/19 PHP
php使用FFmpeg接口获取视频的播放时长、码率、缩略图以及创建时间
2016/11/07 PHP
JavaScript高级程序设计 读书笔记之十一 内置对象Global
2012/03/07 Javascript
jquery实现excel导出的方法
2013/04/04 Javascript
js调用后台、后台调用前台等方法总结
2014/04/17 Javascript
jquery中post方法用法实例
2014/10/21 Javascript
jQuery学习笔记之创建DOM元素
2015/01/19 Javascript
nodejs事件的监听与触发的理解分析
2015/02/12 NodeJs
jQuery实现自定义右键菜单的树状菜单效果
2015/09/02 Javascript
基于Bootstrap使用jQuery实现输入框组input-group的添加与删除
2016/05/03 Javascript
Vue.js系列之项目结构说明(2)
2017/01/03 Javascript
深入理解vue.js中的v-if和v-show
2017/06/22 Javascript
详解Angular2表单-模板驱动的表单(Template-Driven Forms)
2017/08/04 Javascript
微信小程序使用canvas的画图操作示例
2019/01/18 Javascript
vue 指令和过滤器的基本使用(品牌管理案例)
2019/11/04 Javascript
详解如何修改 node_modules 里的文件
2020/05/22 Javascript
Vue页面跳转传递参数及接收方式
2020/09/09 Javascript
Vant+postcss-pxtorem 实现浏览器适配功能
2021/02/05 Javascript
Python中的ceil()方法使用教程
2015/05/14 Python
python在windows下创建隐藏窗口子进程的方法
2015/06/04 Python
深入解析Python中的集合类型操作符
2015/08/19 Python
浅谈python和C语言混编的几种方式(推荐)
2017/09/27 Python
python 打印直角三角形,等边三角形,菱形,正方形的代码
2017/11/21 Python
Python实现PS滤镜功能之波浪特效示例
2018/01/26 Python
python实现括号匹配的思路详解
2018/08/23 Python
详解Django-auth-ldap 配置方法
2018/12/10 Python
Django学习笔记之为Model添加Action
2019/04/30 Python
python 列表、字典和集合的添加和删除操作
2019/12/16 Python
安装完Python包然后找不到模块的解决步骤
2020/02/13 Python
一套带网友答案的.NET笔试题
2016/12/06 面试题
生物科学系大学生的自我评价
2013/12/20 职场文书
测控技术与仪器个人求职信范文
2013/12/30 职场文书
大学生职业生涯规划书模板
2014/01/18 职场文书
《红领巾真好》教学反思
2016/02/16 职场文书
MySQL插入数据与查询数据
2022/03/25 MySQL