Vue分页效果与购物车功能

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

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

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

<script src="/UploadFiles/2021-04-02/vue.js">

分页效果大致如此。
购物车组件


购物车组件，是做项目不可少的，面试也是，动不动就叫我上机写个购物车的组件，写就写咯，购物车时做商城项目不可少的，写好购物车组件会很方便，简书代码的重复性。
那么想想购物车组件有什么内容呢？
购物车，是不是有：商品名称，单价，增加删减单品的数量呢？还有就是订单总金额数呢？这些是必不可少的哦！！！

购物车组件不知道有什么也是可以去看看别人的先，看看有什么，购物车组件一般包含显示商品的名称，单价，购买的数量以及订单总金额，通过增加或减少商品的购买的数据，并同步更改订单的总金额。
总金额同步，我们能想到的是用什么指令，是不是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分页效果与购物车功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！