在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 }"

编辑器提示 ：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标签包裹即可，v-for 写在div 上，v-if 绑定在需要循环的元素之上即可

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

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

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

computed: {
    activeIndex: function () {
        return this.list.filter( (item)=> {
            return item.name;
因为： v-for 比 v-if 优先级高，如果每一次都需要遍历整个数组，将会影响速度，尤其是当之需要渲染很小一部分的时候，必要情况下应该替换成 computed 属性。
 
   我的v-if和v-else是和v-for一起使用的，此时，v-for的优先级是大于v-if和v-else的。相当于v-if重复运行于每个v-for循环中，v-else同理。所以节点未...
                                    在Vue中使用v-for循环一个数组/对象时，如果再使用v-if，那么会提示使用计算属性(能正常使用)，因为Vue中是不提倡v-for与v-if同时使用的。
[vue/no-use-v-if-with-v-for]
The 'menu' 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
代码如下：
原因：v-for
                                    Vue中v-if和v-for为何不能连用？
<div v-for="(item, index) in list" :key="index" v-if="flag">
{{ item }}
v-for 会比 v-if优先执行，当一个标签上面同时存在：v-for 和 v-if 的时候，会先执行v-for循环，
然后去看循环出来的每个div上面flag的值，是真还是假。如果flag为true，就显示 ，否则就不显示
这样就造成了不必要的性能浪费
# 对象语法
我们可以传给 :class 一个对象，以动态地切换 class：
&lt;div v-bind:class="{ active: isActive }"&gt;&lt;/div&gt;
&lt;div class="static"
     v-bind:class="{ active: isActive, 'text-danger': hasError }"&gt;
[eslint-plugin-vue]
[vue/no-use-v-if-with-v-for]
This ‘v-if‘ should be moved to the wrapper element
当v-if 与 v-for 一起使用时，v-for比 vi-if的优先级高，这就意味这v-if讲重复运行每个v-for循环中，所以不推荐一起使用。可以放在循环外，或者放在计算属性里面进行遍历。
(Emitted value instead of an instance of Error) &lt;divider v-for="item in list"&gt;: component lists...