Vue如何實現分頁效果與購物車功能

這篇文章將為大家詳細講解有關Vue如何實現分頁效果與購物車功能，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

分頁組件

首先來創建項目：

分頁組件，做項目不要寫動手寫代碼，要想想業務邏輯，怎么寫，如何寫才是最好的呈現方式，做項目不急，要先想好整體的框架，從底層一開始最想要的是什么做起。

先動代碼，邊做邊想是會出問題的，而且還會卡殼，讓你半路出家的。

分頁組件，你覺得要什么內容，是頁面？如果不懂可以去看看別人的分頁是怎么做的，考慮業務邏輯，整體出發去思考問題。要不然我去百度看看，別人的分頁效果。

看了后做不出來也是沒有關系的，我們呢？

可以從底部出發，從最小的邏輯開始，從做這個需要考慮到什么想起，一步一步來，做好局部的功能，這個功能做好了，才去做另一個功能或者頁面哦~

分頁組件我們需要的字段有哪些？

你想想，當前頁，是不是有，curpage當前頁，每頁的大小，pagesize，總的頁數，total，等等，考慮不到的，沒關系看看別人的有什么，想好后才寫代碼，那才快。

不說無用，先創建項目：

寫的分頁組件

props: ['total'],
data: function() {
 return {
 page: 1, // 當前頁碼
 pagesize: 10 // 每一頁的記錄數
 });
},

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

總頁碼 = Math.ceil(總記錄數/每一頁記錄數）

總頁碼數，7頁，或6頁，當前是向上取整，每一頁記錄數10頁，總記錄數，總的多少頁。如80除10頁，8頁。

math.ceil(x)返回大于等于參數x的最小整數,即對浮點數向上取整.

單擊事件，切換不同的頁面的效果。

<div id="app">
<h2>分頁組件</h2>
//父
<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>

分頁效果大致如此。

購物車組件

購物車組件，是做項目不可少的，面試也是，動不動就叫我上機寫個購物車的組件，寫就寫咯，購物車時做商城項目不可少的，寫好購物車組件會很方便，簡書代碼的重復性。

那么想想購物車組件有什么內容呢？

購物車，是不是有：商品名稱，單價，增加刪減單品的數量呢？還有就是訂單總金額數呢？這些是必不可少的哦！！！

購物車組件不知道有什么也是可以去看看別人的先，看看有什么，購物車組件一般包含顯示商品的名稱，單價，購買的數量以及訂單總金額，通過增加或減少商品的購買的數據，并同步更改訂單的總金額。

總金額同步，我們能想到的是用什么指令，是不是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">
 <h2>{{message}}</h2>
 <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如何實現分頁效果與購物車功能”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。