欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

基于Vuejs實(shí)現(xiàn)購物車功能

 更新時(shí)間:2016年08月02日 12:48:36   作者:前端小菜bi  
這篇文章主要為大家詳細(xì)介紹了基于Vuejs實(shí)現(xiàn)購物車功能的相關(guān)資料,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了Vuejs購物車實(shí)現(xiàn)代碼,供大家參考,具體內(nèi)容如下

html:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>我的vue購物車</title>
 <link rel="stylesheet" href="css/bootstrap.min.css">
 <link rel="stylesheet" href="css/style.css">
 <script src="js/vue.js"></script>
 <script src="js/data.js"></script>
</head>
<body>
 <div class="container">
 <template v-if="data.length">
 <h3>我的購物車:</h3>
 <div class="product">
 <div class="item">
 <span class="btn btn-default">商品名稱</span>
 <span class="btn btn-default left">商品單價(jià)</span>
 <span class="btn btn-default left">商品數(shù)量</span>
 <span class="btn btn-default left">操作</span>
 </div>
 <div class="item" style="padding:5%;border: 1px solid black" v-for="item in data">
 <span class="btn btn-default">{{item.name}}</span>
 <span class="btn btn-default left" style="margin-left: 18%">{{item.price}}</span>
 <span>
 <em class="btn btn-primary add" v-on:click="add($index)" :class="{off:item.count==11}">+</em>
  {{item.count}}
 <em class="btn btn-primary reduce" v-on:click="reduce($index)" :class="{off:item.count==1}">-</em>
 </span>
 <span class="btn btn-danger left" v-on:click="remove(item)">移除</span>
 </div>
 </div>
 <h2>清單:</h2>
 <span class="btn btn-primary">商品總價(jià):{{price |currency '$' 2}}</span>
 </template>
 <template v-else>
 <div class="jumbotron">
 <h1>您的購物車空了</h1>
 <p>是否去重新挑選</p>
 <p><a class="btn btn-primary btn-lg" href="#" role="button">重新挑選</a></p>
 </div>
 </template>
 </div>
</body>
<script>
 new Vue({
 el:'.container',
 data:{
 data:data
 },
 computed:{
 price:function () {
 var price = 0;
 for(var i=0;i<this.data.length;i++){
 var self = this.data[i];
 price += self.count * self.price;
 }
 return price;
 }
 },
 methods:{
 add:function ($index) {
 var self = this.data[$index];
 if(self.count >10){
 return false;
 }
 self.count++;
 },
 reduce:function($index){
 var self = this.data[$index];
 if(self.count <= 1){
 return false
 }
 self.count--;
 },
 remove:function(item){
 this.data.$remove(item);
 }
 }
 })
</script>
</html> 

css:

h3{
 text-align: center;
}
.left{
 margin-left: 14%;
}
.item{
 text-align: center;
 padding: 3%;
}
.add{
 margin-left: 15%;
}
.off{
 background-color: lightgrey;
 border: 1px solid lightgrey;
}

 js: 

/**
 * Created by Administrator on 2016/7/29.
 */
var data = [
 {
 name:'IPhone 6',
 price:5466,
 id:1,
 count:1
 },
 {
 name:'IMac',
 price:7466,
 id:2,
 count:1
 },
 {
 name:'iPad',
 price:5400,
 id:3,
 count:1
 }
]

本文已被整理到了《Vue.js前端組件學(xué)習(xí)教程》,歡迎大家學(xué)習(xí)閱讀。

關(guān)于vue.js組件的教程,請大家點(diǎn)擊專題vue.js組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。

更多vue學(xué)習(xí)教程請閱讀專題《vue實(shí)戰(zhàn)教程》

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • Vue源碼之rollup環(huán)境搭建步驟詳解

    Vue源碼之rollup環(huán)境搭建步驟詳解

    這篇文章主要介紹了Vue源碼之rollup環(huán)境搭建步驟詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-09-09
  • vue實(shí)現(xiàn)多個(gè)元素或多個(gè)組件之間動(dòng)畫效果

    vue實(shí)現(xiàn)多個(gè)元素或多個(gè)組件之間動(dòng)畫效果

    這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)多個(gè)元素或多個(gè)組件之間動(dòng)畫效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2018-09-09
  • element ui 表格動(dòng)態(tài)列顯示空白bug 修復(fù)方法

    element ui 表格動(dòng)態(tài)列顯示空白bug 修復(fù)方法

    今天小編就為大家分享一篇element ui 表格動(dòng)態(tài)列顯示空白bug 修復(fù)方法,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • vuecli+AXdownload下載組件封裝?+css3下載懸浮球動(dòng)畫效果

    vuecli+AXdownload下載組件封裝?+css3下載懸浮球動(dòng)畫效果

    當(dāng)觸發(fā)下載功能的時(shí)候,會(huì)觸發(fā)一個(gè)下載動(dòng)畫,下載懸浮球會(huì)自動(dòng)彈出,并且閃爍提示有新的下載任務(wù)直到下載任務(wù)完場提示,接下來通過本文介紹vuecli+AXdownload下載組件封裝?+css3下載懸浮球動(dòng)畫效果,需要的朋友可以參考下
    2024-05-05
  • 詳解如何使用 vue-cli 開發(fā)多頁應(yīng)用

    詳解如何使用 vue-cli 開發(fā)多頁應(yīng)用

    本篇文章主要介紹了詳解如何使用 vue-cli 開發(fā)多頁應(yīng)用,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-12-12
  • vue中如何自定義右鍵菜單詳解

    vue中如何自定義右鍵菜單詳解

    這篇文章主要給大家介紹了關(guān)于vue中如何自定義右鍵菜單的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-12-12
  • Vue標(biāo)簽屬性動(dòng)態(tài)傳參并拼接字符串的操作方法

    Vue標(biāo)簽屬性動(dòng)態(tài)傳參并拼接字符串的操作方法

    這篇文章主要介紹了Vue標(biāo)簽屬性動(dòng)態(tài)傳參并拼接字符串的操作方法,我們需要根據(jù)傳入值的類型,在placeholder屬性賦值"請輸入長度",“請輸入寬度”,"請輸入厚度"等提示字符,本文通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友參考下吧
    2023-11-11
  • 基于vue-router 多級路由redirect 重定向的問題

    基于vue-router 多級路由redirect 重定向的問題

    今天小編就為大家分享一篇基于vue-router 多級路由redirect 重定向的問題,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • Vue響應(yīng)式原理深入分析

    Vue響應(yīng)式原理深入分析

    響應(yīng)式就是當(dāng)對象本身(對象的增刪值)或者對象屬性(重新賦值)發(fā)生變化時(shí),將會(huì)運(yùn)行一些函數(shù),最常見的就是render函數(shù),下面這篇文章主要給大家介紹了關(guān)于Vue3響應(yīng)式原理的相關(guān)資料,需要的朋友可以參考下
    2022-12-12
  • vue3數(shù)據(jù)更新而視圖未更新問題解決

    vue3數(shù)據(jù)更新而視圖未更新問題解決

    本文主要介紹了vue3?解決數(shù)據(jù)更新而視圖未更新問題,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-10-10

最新評論