vue成就购物城的功能 (展示增删改查)

vue成就购物城的功能 (展示增删改查)<!DOCTYPE html>
<html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="js/vue.js"></script>
        <!-- CSS -->
        <link rel="stylesheet" type="text/css" href="css/bootstrap4.min.css"/>
    </head>
    <body>
        <div id="app">
            <input type="text" placeholder="请输入商品名称" class="form-control" style="width: 300px;margin: 20px;" v-model="word">
            <table class="table">
                <tr>
                    <th>选择</th>
                    <th>序号</th>
                    <th>商品图片</th>
                    <th>商品名称</th>
                    <th>商品单价</th>
                    <th>商品小计</th>
                    <th>购买数量</th>
                    <th>操作</th>
                </tr>
                
                <tr v-for="(v,k) in res">
                    <th><input type="checkbox" v-model="v.is_check"></th>
                    <th>{{k+1}}</th>
                    <th><img :src="v.goods_img" alt="无法识别" width="100" height="100"></th>
                    <th>{{v.goods_name}}</th>
                    <th>{{v.goods_price.toFixed(2)}}</th>
                    <th>{{v.goods_sum.toFixed(2)}}</th>
                    <th>
                        <button type="button" class="btn btn-primary" @click="jian(k)">-</button>
                        {{v.goods_num}}
                        <button type="button" class="btn btn-primary" @click="jia(k)">+</button>
                    </th>
                    <th>
                        <button type="button" class="btn btn-danger" @click="del(k)">删除</button>
                    </th>
                </tr>
            </table>
            
            <p>
                您当前选中<label style="color: red;font-size: 20px;font-weight: bold;">{{count}}</label>件商品,
                总价为:¥<label style="color: red;font-size: 20px;font-weight: bold;">{{priceSum}}</label>
            </p>
            
            <button type="button" class="btn btn-primary" @click="fun1()">全选</button>
            <button type="button" class="btn btn-primary" @click="fun2()">全不选</button>
            <button type="button" class="btn btn-primary" @click="fun3()">反选</button>
            <button type="button" class="btn btn-danger" @click="fun4()">批量删除</button>
            
        </div>
    </body>
</html>
<script>
    new Vue({
        el:"#app",
        data:{
            word:'',
            list:[
                {
                    goods_name:'李白-凤求凰',//名称
                    goods_img:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=182292951,1294008673&fm=26&gp=0.jpg',//图片
                    goods_price:1688,//单价
                    goods_num:1,//购买数量
                    goods_sum:1688,//小计
                    is_check:false
                },
                {
                    goods_name:'镜-炽热神光',//名称
                    goods_img:'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1257477182,1700333640&fm=11&gp=0.jpg',//图片
                    goods_price:1688,//单价
                    goods_num:1,//购买数量
                    goods_sum:1688,//小计
                    is_check:false
                },
                {
                    goods_name:'露娜-紫霞仙子',//名称
                    goods_img:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=162561561,435847683&fm=26&gp=0.jpg',//图片
                    goods_price:888,//单价
                    goods_num:1,//购买数量
                    goods_sum:888,//小计
                    is_check:false
                },
                {
                    goods_name:'孙悟空-地狱火',//名称
                    goods_img:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2932847835,1578465715&fm=26&gp=0.jpg',//图片
                    goods_price:1688,//单价
                    goods_num:1,//购买数量
                    goods_sum:1688,//小计
                    is_check:false
                },
                {
                    goods_name:'貂蝉-异域舞娘',//名称
                    goods_img:'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=381785760,2363478747&fm=15&gp=0.jpg',//图片
                    goods_price:288,//单价
                    goods_num:1,//购买数量
                    goods_sum:288,//小计
                    is_check:false
                }
            ]
        },
        methods:{
            jia(index){
                var obj = this.list[index]
                obj.goods_num++
                obj.goods_sum = obj.goods_num*obj.goods_price
            },
            jian(index){
                var obj = this.list[index]
                obj.goods_num = obj.goods_num-1 <= 1 ? 1 : obj.goods_num-1
                obj.goods_sum = obj.goods_num*obj.goods_price
            },
            del(index){
                if(confirm('确定要删除吗?')){
                    this.list.splice(index,1)
                }
            },
            fun1(){
                this.list.map(function(v,k){
                    v['is_check'] = true
                })
            },
            fun2(){
                this.list.map(function(v,k){
                    v['is_check'] = false
                })
            },
            fun3(){
                this.list.map(function(v,k){
                    if(v['is_check']){
                        v['is_check'] = false
                    }else{
                        v['is_check'] = true
                    }
                })
            },
            fun4(){
                if(confirm('确定要删除所选内容吗?')){
                    //把不删除的拿出来
                    var arr = []
                    this.list.map(function(v,k){
                        if(v['is_check']==false){
                            arr.push(v)
                        }
                    })
                    this.list = arr
                }
            }
        },
        computed:{
            res(){
                var word = this.word
                if(word==''){
                    return this.list
                }else{
                    var arr = []
                    this.list.map(function(v,k){
                        if(v.goods_name.indexOf(word)>-1){
                            arr.push(v)
                        }
                    })
                    return arr;
                }
            },
            count(){
                var i=0
                this.list.map(function(v,k){
                    if(v['is_check']){
                        i+=1
                    }
                })
                return i;
            },
            priceSum(){
                var i=0;
                this.list.map(function(v,k){
                    if(v['is_check']){
                        // console.log();
                        i += v['goods_sum']
                    }
                })
                
                return i.toFixed(2);
            }
        }
    })
</script>

 

上一篇:Java项目:校园超市管理系统(java+SSM+Mysql+Maven+Bootstrap)


下一篇:HTML5 WebUploader 分块上传