zoukankan      html  css  js  c++  java
  • Vue实现购物车前端页面效果

    效果图:

    <template>
        <div>
            <div class="list" v-for="(item,index) in data" :key="index">
                <div class="list-01">
                    <img :src="item.g_img" width="100%;" height="100%" alt="">
                </div>
                <div class="list-02">
                    <div class="list-02-1">
                        【{{item.t_name}}】{{item.g_name}}
                    </div>
                    <div class="list-02-2">
                        {{item.g_desc}}
                    </div>
                    <div class="list-02-3">
                        ¥:{{item.g_price}}
                    </div>
                </div>
                <div class="list-03">
                    ¥:{{item.default_price}}
                </div>
                <div class="list-04">
                    <div class="left">
                        <el-button icon="el-icon-minus" circle class="list-04-button" @click="jian(index)"></el-button>
                    </div>
                    <div class="center">
                        <el-input type="text" class="num" v-model="item.default_num" @blur="fun(index)"></el-input>
                    </div>
                    <div class="right">
                        <el-button icon="el-icon-plus" circle class="list-04-button" @click="jia(index)"></el-button>
                    </div>
                </div>
                <div class="list-05">
                    <el-button type="danger" icon="el-icon-delete" circle style="margin-top:5px;"></el-button>
                </div>
            </div>
        </div>
    </template>
    
    <script>
    export default {
        data(){
            return {
                data:[],
                input:''
            }
        },
        methods:{
            jian(index){
                // console.log(this.data[index]);
                var last_num = this.data[index].default_num-1 <=1 ? 1 : this.data[index].default_num-1;
                var last_price = last_num*this.data[index].g_price;
                this.data[index].default_num = last_num;
                this.data[index].default_price = last_price;
            },
            jia(index){
                var last_num = this.data[index].default_num+1;
                var last_price = last_num*this.data[index].g_price;
                this.data[index].default_num = last_num;
                this.data[index].default_price = last_price;
            },
            fun(index){
                var last_num = this.data[index].default_num;
                var last_price = last_num*this.data[index].g_price;
                this.data[index].default_num = last_num;
                this.data[index].default_price = last_price;
            }
        },
        created(){
            var obj = this;
            this.$axios.get('/api/goods/goods-car-lists?user_id=2')
            .then(function(res){
                obj.data = res.data.result;
                // console.log(res.data.result);
            })
        }
    
    }
    </script>
    
    <style>
  • 相关阅读:
    896. Monotonic Array单调数组
    865. Smallest Subtree with all the Deepest Nodes 有最深节点的最小子树
    489. Robot Room Cleaner扫地机器人
    JavaFX
    《Python CookBook2》 第一章 文本
    《Python CookBook2》 第一章 文本
    《Python CookBook2》 第一章 文本
    《Python CookBook2》 第一章 文本
    《Python CookBook2》 第一章 文本
    《Python CookBook2》 第一章 文本
  • 原文地址:https://www.cnblogs.com/jiangshiguo/p/12161558.html
Copyright © 2011-2022 走看看