腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

Vue分頁(yè)效果與購(gòu)物車功能

更新時(shí)間：2019年12月13日 11:44:52 作者：達(dá)達(dá)前端小酒館

這篇文章主要介紹了Vue分頁(yè)效果與購(gòu)物車功能,本文圖文實(shí)例相結(jié)合給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

分頁(yè)組件

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

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

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

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

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

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

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

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

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

寫的分頁(yè)組件

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

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

總頁(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">
<h1>分頁(yè)組件</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 阻止事件的默認(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ī)寫個(gè)購(gòu)物車的組件，寫就寫咯，購(gòu)物車時(shí)做商城項(xiàng)目不可少的，寫好購(gòu)物車組件會(huì)很方便，簡(jiǎn)書代碼的重復(fù)性。

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

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

購(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)聽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)聽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)聽事件使用

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">
 <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: '測(cè)試數(shù)據(jù)'
  },
 })
</script>

vue實(shí)際中的應(yīng)用開發(fā)就到此結(jié)束了，后續(xù)敬請(qǐng)期待?。。?/p>

總結(jié)

以上所述是小編給大家介紹的Vue分頁(yè)效果與購(gòu)物車功能，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

您可能感興趣的文章: