javascript - 请教：Vue如何删除选中的数组元素(有多个选中的情况下)? -PHP中文网问答

数据是模拟的，当点击编辑的时候，我想删除选中的元素，就是如果选中一个的情况下，就删除一个，选中多个的情况下，就删除多个，这样
每个数组里的元素，默认有个 checked 属性

演示地址

html结构

    
        

            全部商品
            
                {{ showtext ? '编辑' : '完成' }}
            
        

        
        
         

        


        
            
                
                
                    全选
                
            
            
                总计：￥684
            
            
                去付款
                删除

js代码

    var vm = new Vue({
        el : ".t-root",
        data : {
            showtext : true,
            shoppingList : [
                {
                    id : 11,
                    title : '贡牌茶叶西湖春茶正宗雨前龙井茶礼盒装礼盒装160g礼盒装',
                    money : 48,
                    imgsrc : 'images/download-order-img-11@2x.png',
                    shoppingnum : 1,
                    checked : true
                },
                {
                    id : 22,
                    title : '贡牌茶叶西湖春茶正宗雨前龙井茶礼盒装礼盒装160g礼盒装',
                    money : 98,
                    imgsrc : 'images/download-order-img-11@2x.png',
                    shoppingnum : 1,
                    checked : true
                },
                {
                    id : 33,
                    title : '贡牌茶叶西湖春茶正宗雨前龙井茶礼盒装礼盒装160g礼盒装',
                    money : 148,
                    imgsrc : 'images/download-order-img-11@2x.png',
                    shoppingnum : 1,
                    checked : true
                }
            ]
        },
        computed : {
        },
        methods : {
            editorShopping : function(){
               this.showtext = !this.showtext;
            },
            removeShopping : function(){
                var that = this;
                that.shoppingList.forEach(function(value,index){
                    //只有为true时才删除
                    if (value.checked) {
                        that.shoppingList.splice(index,1);
                       // console.log(index);
                    }
                });
            },
            add : function(index){
                var shopping = this.shoppingList[index];
                if (shopping.shoppingnum == 100) {
                    return false;
                }else {
                    shopping.shoppingnum ++;
                }
            },
            reduce : function(index){
                var shopping = this.shoppingList[index];
                if (shopping.shoppingnum == 1){
                    return false;
                }else {
                    shopping.shoppingnum --;
                }
            }
        }
    });

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <p id="app"> <p> <button @click="removeAll">删除全部</button> </p> <ul v-for="value of arr"> <li> {{value}} </li> </ul> </p> </body> <script src="./vue.js" charset="utf-8"></script> <script type="text/javascript"> new Vue({ el:'#app', data:{ arr:['a','b','c'] }, methods:{ removeAll:function() { var length = this.arr.length; for(let i =length ;i>=0 ;i--){ this.arr.splice(i,1); } } } }) </script> </html>

removeShopping : function(){ var that = this; for (var i = that.shoppingList.length - 1;i >= 0;i--) { var index = that.shoppingList[i]; if (index.checked) { that.shoppingList.splice(i,1); } } }

{{ shopping.title }}