vue.js實現簡單的購物車功能

阿新 • • 發佈：2019-01-16

咳咳，第一次寫部落格，有點小緊張，這次我將給大家帶來一個vue.js實現購物車的小專案，如有不足請嚴厲指出。

購物車功能有：全選和選擇部分商品，選中商品總價計算，商品移除，以及調整購買數量等功能。

js
主要有以下方法

加函式，減函式，手動修改數量判斷庫存函式，總價格計算函式，單選事件，全選事件，一共分為6個事件

具體效果如下圖

程式碼在這裡

main.js

'use strict'

var app = new Vue({
    el: '#app',
    data: {
        list: [
            {
                id: 1,
                name: 'iPhone 7',
                price: 6188,
                count: 1,
                check: true,
            },
            {
                id: 2,
                name: 'iPad Pro',
                price: 5888,
                count: 1,
                check: false,
            },
            {
                id: 3,
                name: 'MacBook Pro',
                price: 21488,
                count: 1,
                check: true,
            },
        ]
    },
    methods: {
        remove: function (index) {  //移除商品
            this.list.splice(index, 1);
        },
        reduce: function (index) {  //減少商品
            this.list[index].count --;
        },
        add: function (index) { //增加商品
            this.list[index].count ++;
        },
        selAll: function () {   //商品全選
            let isAll = document.querySelector('#all');

            if (isAll.checked == true) {
                this.list.forEach(function(item, index) {
                    item.check = true;
                })  
            } else {
                this.list.forEach(function(item, index) {
                    item.check = false;
                })  
            }
        }
    },
    computed: {
        totalPrices: function () {  //計算總價
            let totalPrices = 0;

            this.list.forEach(function (val, index) {
                if (val.check == true)
                    totalPrices += parseFloat(val.price * val.count);
            })

            return totalPrices.toString().replace(/\B(?=(\d{3})+$)/g, ','); //每三位數中間加一個‘，’
        }
    }
})

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
<div id="app" v-cloak>
    <template v-if="list.length">
        <table>
            <thead>
                <tr>
                    <th>全選<input id="all" @click="selAll" type="checkbox" checked></th>
                    <th>商品名稱</th>
                    <th>商品單價</th>
                    <th>購買數量</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <template v-for="(item, index) in list">
                    <tr>
                        <td>
                            <input type="checkbox" :checked="item.check" @click="item.check = !item.check">
                        </td>
                        <td>
                            {{ item.name }}
                        </td>
                        <td>
                            {{ item.price }}
                        </td>
                        <td>
                            <button @click="reduce(index)" :disabled="item.count == 1">-</button>
                            {{ item.count }}
                            <button @click="add(index)">+</button>                            
                        </td>
                        <td>
                            <button @click="remove(index)">移除</button>
                        </td>
                    </tr>
                </template>
            </tbody>
        </table>
        <div>總價: ￥ {{ totalPrices }}</div>
    </template>
    <template v-else>
        購物車沒有商品
    </template>
</div>

<script src="vue.js"></script>
<script src="main.js"></script>
</body>
</html>

main.css

[v-cloak] {
  display: none;  
}

#app {
    width: 500px;
    margin: 0 auto;
}

table {
    width: 100%;
    border: 1px solid #444;
    border-collapse: collapse;
}

th, td {
    padding: 8px 16px;
    border: 1px solid #444;
    text-align: left;
}

th {
    background: #89abd3;
    color: rgb(214, 224, 235);
    font-weight: 600;
    white-space: nowrap;
}

vue.js實現簡單的購物車功能

咳咳，第一次寫部落格，有點小緊張，這次我將給大家帶來一個vue.js實現購物車的小專案，如有不足請嚴厲指出。購物車功能有：全選和選擇部分商品，選中商品總價計算，商品移除，以及調整購買數量等功能。 js主要有以下方法加函式，減函式，手動修改數量判斷庫存函式，總價格

bootstrap+vue.js實現簡單的購物車功能

因為此前做過一段時間Django的後端開發，前端方面的知識一直非常欠缺，總覺得前端的知識太繁雜，無從下手。最近工作比較閒，就研究了一陣子，從最基礎的html、js開始看，這個星期學習了一下vue.js，覺得真是棒極了。這篇是使用bootstrap+vue.js實

JS 實現簡單計算器功能

// if(symbol != null){ console.log(aNum, bNum); getResult(symbol, aNum, bNum); show.innerHTML = result;

vue.js實現撥打電話功能

<div class="bottom" v-if="name!=''"> 您的專屬顧問：<br>

JS實現簡單loading功能頁面

實現簡單購物車功能

說明：選擇需要購買的物品，計算總價。 <!DOCTYPE html> <html> <head></body> <link href="sohud

Python Django實現簡單購物車功能

Django版本：1.11 作業系統：Windows Python：3.5 歡迎加入學習交流QQ群：657341423 這裡以淘寶為例這是一個商品的詳情，這裡有2個按鈕功能，一個是立即購買，一個加入購物車，兩者都是生成一個訂單，但兩者實現的方法是不相同的

VUE.JS實現購物車功能

add http 功能 hang 總數 tps conf methods htm 購物車是電商必備的功能，可以讓用戶一次性購買多個商品，常見的購物車實現方式有如下幾種： 1. 用戶更新購物車裏的商品後，頁面自動刷新。 2. 使用局部刷新功能，服務器端返回整個購物

使用vue.js實現checkbox的全選和多個的刪除功能

ons eth table padding ted rip fun lpad let 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

通過 JS 實現簡單的拖拽功能並且可以在特定元素上禁止拖拽

如何 alt targe 但是 mes 並且 mod closed demo 前言關於講解 JS 的拖拽功能的文章數不勝數，我確實沒有必要大費周章再寫一篇重復的文章來吸引眼球。本文的重點是講解如何在某些特定的元素上禁止拖拽。這是我在編寫插件時遇到的問題，其實很多插件的拖

vue.js實現頁面倒計時跳轉功能

his 首頁 turn return () data col world mit 需求分析：頁面倒計時5秒後進入系統主頁，數字需要實時更新！ <template> <div class=""> <h1>歡迎來到Vue.js

Vue js中簡單的搜尋功能

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://

練習：vue.js實現購物車+表單驗證

購物車 <!DOCTYPE html> <head> <meta charset="UTF-8"> <title>購物車</title> <script src="../js/vue.js">

vue實現簡單購物車

效果圖如下比較醜哈哈。。程式碼如下 <template> <div class="user"> <div><input type="checkbox" v-model="checkAll" @click="ch

flex佈局+vue.js實現的一個投骰子的功能

1、直接貼程式碼吧。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src

實用小專案——Vue.js 實現增刪查改功能

最近學習了vue.js框架，嘗試著做了一個增刪查改功能的小專案。今天發博來跟大家交流交流經驗。整體效果如下動態圖：首先，我使用的是Bootstrap搭建整體框架： <!DOCTYPE html> <html> <head&g

Vue.js實現多條件篩選、搜尋、排序及分頁的表格功能

與上篇實踐教程一樣，在這篇文章中，我將繼續從一種常見的功能——表格入手，展示Vue.js中的一些優雅特性。同時也將對filter功能與computed屬性進行對比，說明各自的適用場景，也為vue2.0版本中即將刪除的部分filter功能做準備。需求分析還是先從需求入手，想想實現這樣一個功能需要注意

用Vue.js實現全選與全不選刪除功能

這是實現全選與全不選邏輯的程式碼，大家只要給相應的控制元件再加上刪除邏輯就完成了全選與選不選、單選等刪除功能了；這段程式碼經過我很多次強暴，是可以用的。 <template> <div id="hello"> <ol>

【轉載】vue.js實現格式化時間並每秒更新顯示功能示例

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user

Vue.js實現一個todo-list的上移，下移，刪除功能

如圖，A simple todo-list長這樣這是一個基於vue.js的一個簡單的todo-list小demo。首先要實現新增非空list，點選list切換finished狀態這樣的一個效果，推薦學習地址---->點選開啟連結接下來是實現的一個上移，下移，刪除

vue.js實現簡單的購物車功能

main.js

index.html

main.css

相關推薦