這篇文章將為大家詳細(xì)講解有關(guān)Vue如何實(shí)現(xiàn)分頁(yè)效果與購(gòu)物車功能，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)建站從2013年開(kāi)始，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目網(wǎng)站制作、成都網(wǎng)站制作網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元桑珠孜做網(wǎng)站,已為上家服務(wù),為桑珠孜各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:18982081108

分頁(yè)組件

首先來(lái)創(chuàng)建項(xiàng)目：

分頁(yè)組件，做項(xiàng)目不要寫(xiě)動(dòng)手寫(xiě)代碼，要想想業(yè)務(wù)邏輯，怎么寫(xiě)，如何寫(xiě)才是最好的呈現(xiàn)方式，做項(xiàng)目不急，要先想好整體的框架，從底層一開(kāi)始最想要的是什么做起。

先動(dòng)代碼，邊做邊想是會(huì)出問(wèn)題的，而且還會(huì)卡殼，讓你半路出家的。

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

看了后做不出來(lái)也是沒(méi)有關(guān)系的，我們呢？

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

分頁(yè)組件我們需要的字段有哪些？

你想想，當(dāng)前頁(yè)，是不是有，curpage當(dāng)前頁(yè)，每頁(yè)的大小，pagesize，總的頁(yè)數(shù)，total，等等，考慮不到的，沒(méi)關(guān)系看看別人的有什么，想好后才寫(xiě)代碼，那才快。

不說(shuō)無(wú)用，先創(chuàng)建項(xiàng)目：

寫(xiě)的分頁(yè)組件

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

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

總頁(yè)碼 = Math.ceil(總記錄數(shù)/每一頁(yè)記錄數(shù)）

總頁(yè)碼數(shù)，7頁(yè)，或6頁(yè)，當(dāng)前是向上取整，每一頁(yè)記錄數(shù)10頁(yè)，總記錄數(shù)，總的多少頁(yè)。如80除10頁(yè)，8頁(yè)。

math.ceil(x)返回大于等于參數(shù)x的最小整數(shù),即對(duì)浮點(diǎn)數(shù)向上取整.

單擊事件，切換不同的頁(yè)面的效果。

<div id="app">
<h2>分頁(yè)組件</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 阻止事件的默認(rèn)行為，

<script src="vue.js"> </script>
<script>
// 定義組件
const PageComponent = {
 name: 'PageComponent',
 template: '#page-component',
 props: ['total'],
 
 data: function() {
 return {
 page: 1, // 當(dāng)前頁(yè)碼
 pagesize: 10 // 每一頁(yè)的記錄數(shù)
 };
 },
 
 computed: {
 pagecount: function() {
 // 總頁(yè)數(shù)
 return Math.ceil(this.total / this.pagesize);
 }
 }
 
};

// 創(chuàng)建Vue實(shí)例對(duì)象
const app = new Vue({
 el: '#app',
 data: {
 total: 35
 },
 
 components: {
 PageComponent
 }
 
});
</script>

分頁(yè)效果大致如此。

購(gòu)物車組件

購(gòu)物車組件，是做項(xiàng)目不可少的，面試也是，動(dòng)不動(dòng)就叫我上機(jī)寫(xiě)個(gè)購(gòu)物車的組件，寫(xiě)就寫(xiě)咯，購(gòu)物車時(shí)做商城項(xiàng)目不可少的，寫(xiě)好購(gòu)物車組件會(huì)很方便，簡(jiǎn)書(shū)代碼的重復(fù)性。

那么想想購(gòu)物車組件有什么內(nèi)容呢？

購(gòu)物車，是不是有：商品名稱，單價(jià)，增加刪減單品的數(shù)量呢？還有就是訂單總金額數(shù)呢？這些是必不可少的哦?。。?/p>

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

總金額同步，我們能想到的是用什么指令，是不是v-model

v-model指令的雙向綁定

// v-model指令雙向綁定
updateCount: function() {
 // 觸發(fā)input事件
 this.$emit('input', this.count);
}

vue中監(jiān)聽(tīng)input輸入值變化的事件，原生事件；

this.$emit()，是觸發(fā)器，用于父子組件的傳值。

this.$emit(事件,值)

父組件：

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

子組件：

<template>
 <div>
  <div class="group">
   <label>{{title}}</label>
   <input type="text" placeholder="請(qǐng)輸入" @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>

當(dāng)商品的購(gòu)買數(shù)量發(fā)生變化時(shí)，訂單總金額也再變。

這個(gè)時(shí)候應(yīng)該想到computed屬性：

// computed屬性定義下的：

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

v-model雙向綁定實(shí)際上是通過(guò)子組件中$emit方法派發(fā)的input事件，父組件監(jiān)聽(tīng)input事件中傳遞的value值，并存儲(chǔ)在父組件data中，然后父組件通過(guò)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">

子組件使用監(jiān)聽(tīng)事件使用

emit(eventName)觸發(fā)事件

購(gòu)物車最終代碼：

<div id="app">
<div v-for="goods in goodslist">
<p>商品名稱：{{goods.name}}</p>
<p>單價(jià):{{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數(shù)據(jù)
 props: ['value'],
 data: function() {
 return {
 count: this.value
 };
 },
 methods: {
 // v-model指令雙向綁定,修改父組件內(nèi)容
 updateCount: function() {
 // 觸發(fā)input事件
 this.$emit('input',this.count);
 }
 }
};

// 創(chuàng)建vue實(shí)例對(duì)象
const app = new Vue({
 el: '#app',
 data: {
 goodslist; [{
 name: 'apple',
 price: 2,
 count: 2
 },{
 name: 'dada'，
 price: 222222222222,
 count: 0
 }]
 },
 
 computed: {
 // 當(dāng)前訂單總金額
 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:"我其實(shí)是一個(gè)語(yǔ)法糖"
  }
 })
</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: "我其實(shí)是一個(gè)語(yǔ)法糖"
  }
 })
</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: '測(cè)試數(shù)據(jù)'
  },
 })
</script>

關(guān)于“Vue如何實(shí)現(xiàn)分頁(yè)效果與購(gòu)物車功能”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

本文標(biāo)題：Vue如何實(shí)現(xiàn)分頁(yè)效果與購(gòu)物車功能-創(chuàng)新互聯(lián)
鏈接URL：http://www.rwnh.cn/article32/hdjpc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站建設(shè)、定制網(wǎng)站、手機(jī)網(wǎng)站建設(shè)、小程序開(kāi)發(fā)、企業(yè)建站、移動(dòng)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)