You should not mix ‘v-for‘ with ‘v-if【eslint-plugin-vue】

[vue/no-use-v-if-with-v-for]
错误信息： “The ‘banner’ 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”

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

修改前：

<ul>
   <li v-for="（item,i)  in banners" v-if="i===1" :key="i">
     {{ item.name }}
   </li>
</ul>

如上述情况，即使有100个user中只有一个需要使用v-if，也需要整个循环数组，这在性能上是极大的浪费。

解决方法；使用computed

修改后：

<div>
	<div v-for="(item,i) in activeBanners" :key="i" >
		{{ item.name }} 
	</div>
</div>
data () {  // 业务逻辑里面定义的数据
    return {
      mark:0;
      banners: [{
        name: 'lllikke',
        isnow：true;
      }, {
        name: 'yayayya',
        isnow：false;
      }]
    }
  }
computed: {
	activeBanners: function () {
		return this.banners.filter(function (item,i) {
			return item.isnow;;//返回isnow为true的数组。
		})
	}
}

总结：v-if比v-for优先级高，一起使用在性能上会造成极大的浪费，并且官网也并不推荐我们这样做，所以我们可以选择使用computed过滤掉列表中不需要显示的项目。