Vue模擬實現購物車結算功能

本文例項為大家分享了實現購物車結算功能的具體程式碼，供大家參考，具體內容如下

Vue模擬實現購物車結算功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Document</title>
    <script src="/vue.js" type="text/"></script>
    <script src="js/-3.6.0.js" type="text/script"></script>
    <style type="text/">
        * {
            padding: 0;
            margin: 0
        }
        
        a {
            text-decoration: none;
        }
        .container {
            width: 500px;
            margin: 10px auto;
        }
        
        .title {
            width: 500px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            font-size: 20px;
            background-color: paleturquoise;
        }
        
        .item {
            position: relative;
            height: 50px;
            border-bottom: 1px solid paleturquoise;
        }
        
        .item img {
            float: left;
            width: 100px;
            height: 50px;
        }
        
        .item .price {
            position: absolute;
            float: left;
            width: 120px;
            margin-left: 10px;
            top: 15px;
            left: 100px;
        }
        
        .item .change {
            position: absolute;
            left: 220px;
            top: 15px;
            float: left;
            width: 200px;
        }
        
        .change a {
            float: left;
            display: block;
            width: 20px;
            height: 20px;
            font-size: 18px;
            text-align: center;
            line-height: 20px;
            background-color: #ccc;
        }
        
        .change input {
            float: left;
            width: 50px;
            margin: 0 5px;
        }
        
        .item .del {
            position: absolute;
            top: 8px;
            left: 420px;
            color: red;
            font-size: 24px;
        }
        
        .item .del:hover {
            top: 0;
            height: 50px;
            background-color: blue;
        }
        
        .total {
            position: relative;
            width: 500px;
            height: 50px;
            background-color: cornflowerblue;
        }
        
        .total span {
            position: absolute;
            top: 14px;
            left: 250px;
        }
        
        .total span em {
            color: red;
            font-style: normal;
            font-size: 20px;
        }
        
        .total button {
            position: absolute;
            top: 8px;
            left: 400px;
            width: 50px;
            height: 35px;
            border-radius: 25%;
            border: none;
            outline: none;
            background-color: tomato;
        }
    </style>
 
</head>
<body>
    <div id="app">
 
  <div>
    <div class="container">
        <my-cart></my-cart>
    </div>
  </div>
  
    </div>
    <script type="text/javascript">
   // 三個子元件
   var CartTitle = {
            props: ['uname'],template: `<div class="title">{{uname}}的商品</div>`
        }
        var CartList = {
            props: ['list'],template: ` <div class="list">
                    <div class="item" :key="item.id" v-for="item in list">
                        <img :src="item.img" alt="Vue模擬實現購物車結算功能">
                        <div class="price">{{item.price}}￥/件</div>
                        <div class="change">
                            <a href="" @click.prevent=" sub(item.id)">-</a>
                            <input type="text" class="num" :value="item.num" @blur="changenum(item.id,$event)">
                            <a href="" @click.prevent=" add(item.id)">+</a>
                        </div>
                        <div class="del" @click="del(item.id)"></div>
                    </div>
                </div>
                    `,methods: www.cppcns.com 
{
                // 向父元件傳遞需要刪除的id
                del: function(id) {
                    // console.log(id)BtzLVaQsId;
                    this.$emit("del-cart",id);
                },// 修改表單輸入的數量
                changenum: function(id,event) {
                    //console.log(id,event.target.value);
                    // 向父元件傳遞然後再修改數量
                    this.$emit('change-num',{
                        id: id,num: event.target.value
                    })
                },// 點選減號按鈕
                sub: function(id) {
                    this.$emit('sub-num',//點選加號按鈕
                add: function(id) {
                    this.$emit('add-num',id);
                }
            }
        }
        var CartTotal = {
                props: ['list'],template: `<div class="total">
                    <span>總價：<em>{{total}}</em>￥</span>
                    <button>結算</button>
                </div>`,computed: {
                    total: function() {
                        var sum = 0;
                        this.list.forEach(item => {
                            sum += item.price * item.num;
                        });
                        return sum;
                    }
                }
            }
            // 定義父元件
        Vue.component('my-cart',{
            data: function() {
                return {
                    uname: '我',list: [{
                        id: 1,name: '安踏鞋子',price: 260,num: 1,img: 'img/a.jpg'
                    },{
                        id: 2,name: '海爾熱水器',price: 2000,img: 'img/hai.jpg'
                    },{
                        id: 3,name: 'iphone手機',price: 7000,img: 'img/iphone.jpg'
                    },{
                        id: 4,name: '華為手機',price: 4500,img: 'img/h.jpg'
                    }]
                }
            },template: `<div class="mycart">
                <cart-title :uname="uname"></cart-title>
                <cart-list :list="list" @del-cart="delcart($event)" @change-num="changeNum($event)" www.cppcns.com 
@sub-num="subnum($event)" @add-num="addnum($event)"></cart-list>
                <cart-total :list="list"&gt;</cart-total>
                </div>`,components: {
                'cart-title': CartTitle,'cart-list': CartList,'cart-total': CartTotal,},methods: {
                delcart: function(id) {
                    // 根據id刪除list中對應的資料
                    // 1.找到id對應資料的索引
                    var index = this.list.findIndex(item => {
                        return item.id == id;
                    });
                    // 2.根據索引刪除對應的資料
                    this.list.splice(index,1);
                },// 根據id修改list中的數量num
                changeNum: function(val) {
                    //console.log(val);
                    this.list.some(item => {
                        if (item.id == val.id) {
                            item.num = val.num;
                        }
                    })
                },//減號減少num
                subnum: function(event) {
                    // console.log(event); event是點選的id號
                    this.list.some(item => {
                        if (item.id == event && item.num > 0) {
                            item.num--;
                        }
                    })
                },// 加號增加num
                addnum: function(event) {
                    this.list.some(item => {
                        if (item.id == event) {
                            item.num++;
                        }
                    })
                }
            }
        });
        var vm = new Vue({
            el: "#app",data: {
 
            }
        });
 
    
    </s客棧 
cript>
    
</body>
</html>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。

Vue模擬實現購物車結算功能

Vue模擬實現購物車結算功能

vue實現購物車結算功能

Vue.js實現購物車基礎功能

vue實現購物車選擇功能

Vue實現購物車基本功能

vue+vant實現購物車全選和反選功能

Vue元件簡易模擬實現購物車

vue實現購物車全部功能的簡單方法

vue實現購物車完整功能

基於vue.js實現購物車

vue中實現回車鍵登入功能

vue.js實現照片放大功能

Vuex實現購物車小功能

vue中實現搜尋過濾功能

vue+elementUI實現簡單日曆功能

jdk1.8+vue elementui實現多級選單功能

JS實現購物車基本功能

Vue.js實現的計算器功能完整示例

微信小程式實現購物車小功能

vue 3 實現購物車增加減少按鈕

Vue模擬實現購物車結算功能

相關推薦