如何用vue通过for的循环下标一次删除多个数据

Question

初学vue，尝试制作一个tudolist的小工具，使用localStorage来缓存之前的记录。
然后做了一个删除已完成的功能，使用下标来选择被选中的数据。但是遇到一个问题，如果我在循环中判定被选中，然后根据下标删除。使用this.li.splice()方法时，每次删除都会改变下标，会导致多个删除错误。后来我使用另一个数组存储被选中的数组，然后使用splice($inArray(i,this.li),1)这样来实现，也发现一个致命问题，如果有相同的内容，就无法准确定位。最后使用了delete方法，先将值置空，然后在设置循环来删除空值。
说了这么多我想问有没有比较直接的方法来删除被选中的元素，还有希望大家给我解答一个问题。如果说vue目的是使用数据来控制显示，那么是否遇到类似的问题都需要遍历来实现吗？有没有一种类似于jq可以选中this的方法。
下面贴下代码

HTML部分代码

<li v-for="(i,index) in li"
        class="list"
        :class="{'active':color[index]}">
        <div class="lists">
                <span>
                    {{i}}
                </span>
        </div>
        <div @click="check(index,i)" class="end">
                <span >
                    {{ms[index]?a:b}}
                </span>
        </div>
 </li>

## js部分代码 ##
            

---

这是之前的想法，有这重复出错的错误

            /* var val=[];
            for (var i in this.color){
                if (this.color[i]==true||this.color[i]=="true"){
                    console.log(i)
                    val.push(this.li[i])
                }
            }
            for (var i=0;i<val.length;i++){
                this.li.splice($.inArray(val[i],this.li),1);
                console.log(val[i])
            }
            this.color=[];
            localStorage.setItem("localname",this.li);
            localStorage.removeItem("localcolor");
            this.ms =[];
            this.s = []*/

---

这是更新以后应该不会出错的代码

            for (var i in this.color){
                if (this.color[i]==true||this.color[i]=="true"){
                    delete this.li[i]
                }
            }
            for (var i=0;i<this.li.length;i++){
                if (this.li[i]==''||this.li[i]==undefined){
                    this.li.splice(i, 1);
                    i-=1;
                    console.log(this.li)
                }
            }
            this.color=[];
            localStorage.setItem("localname",this.li);
            localStorage.removeItem("localcolor");
            this.ms =[];
            this.s = []*/

            
           

Answer 1

http://www.cnblogs.com/xiaoji...

Answer 2

从最后开始遍历，满足条件的删除（从后往前删）

Answer 3

你可以给你渲染的数据加一个数据isFlag:true,为false时表示被删除，当你点击的时候，此时这个的isFlag=！isFlag，删除的时候将isFlag属性为false的数据给删除就可以了

Answer 4

你可以换个思路 把不删的数据拿出来放到一个新数组里去 不就完了吗

Answer 5

this.li = this.li.filter((_, i) => String(this.color[i]) != 'true')