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>
分页效果大致如此。
购物车组件
购物车组件，是做项目不可少的，面试也是，动不动就叫我上机写个购物车的组件，写就写咯，购物车时做商城项目不可少的，写好购物车组件会很方便，简书代码的重复性。
那么想想购物车组件有什么内容呢？
购物车，是不是有：商品名称，单价，增加删减单品的数量呢？还有就是订单总金额数呢？这些是必不可少的哦！！！
购物车组件不知道有什么也是可以去看看别人的先，看看有什么，购物车组件一般包含显示商品的名称，单价，购买的数量以及订单总金额，通过增加或减少商品的购买的数据，并同步更改订单的总金额。
总金额同步，我们能想到的是用什么指令，是不是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;
}
