vue 里面 v-if与v-for同时使用 报警告

 在Vue中使用v-for循环一个数组/对象时，如果再使用v-if，那么会提示使用计算属性(能正常使用)，因为Vue中是不提倡v-for与v-if同时使用的。

1.首先,v-for循环是作用在dom节点上的,如果同时使用的话，编译器会直接报错，告诉你v-if和v-for不能同时使用;

2.当和 v-for 一起使用时，v-for 的优先级比 v-if 更高;

在我的项目中也遇到了问题
不过翻看文档解决了
修改前：

<div id="act_point"

v-for="(item,index) in positions" :key="index"

v-if="lines.line.lineId === item.lineId"

:style="{left: item.left + 'px', bottom: item.bottom + 'px'}"

:class="{'bg1':item.flag == true,'bg2':item.flag == false }"

>

</div>

编辑器提示：vue/no-use-v-if-with-v-for] The 'positions' variable inside 'v-for' directive should be replaced with a computed property that returns filtered array instead. You should not mix 'v-for' with 'v-if'.eslint-plugin-vue

方法一、

修改后：

<div v-for="(item,index) in positions" :key="index">

<div id="act_point"

v-if="lines.line.lineId === item.lineId"

:style="{left: item.left + 'px', bottom: item.bottom + 'px'}"

:class="{'bg1':item.flag == true,'bg2':item.flag == false }"

>

</div>

</div>

即使用div标签包裹即可，v-for 写在div 上，v-if 绑定在需要循环的元素之上即可

方法二、

修改后：

1. 使用空标签 template，让for循环在template上面；

<template v-for="item in list" >
 
        <div v-if="active" :key="item .id">
            {{item .name}}
        </div >
 
</template>

2.使用compted先计算完属性再去渲染模版

computed: {
 
    activeIndex: function () {
 
        return this.list.filter( (item)=> {
            return item.name;
        })
 
    }
 
}

因为： v-for 比 v-if 优先级高，如果每一次都需要遍历整个数组，将会影响速度，尤其是当之需要渲染很小一部分的时候，必要情况下应该替换成 computed 属性。