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>
  • 相关阅读:
    文件的编码是一个怎样的机制
    MySQL——修改root密码的4种方法(以windows为例)
    python中nltk的下载安装方式
    VNC轻松连接远程Linux桌面
    Linux 查看磁盘分区、文件系统、磁盘的使用情况相关的命令和工具介绍
    shell脚本中>/dev/null的含义
    执行shell脚本时提示bad interpreter:No such file or directory的解决办法
    TabLayout+ViewPager的简单使用
    让listView gridView全部扩展开
    购物车中的观察者模式的应用
  • 原文地址:https://www.cnblogs.com/jiangshiguo/p/12161558.html
Copyright © 2011-2022 走看看