vue 里面 v"/>
vue 里面 v
在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 属性。
更多推荐
vue 里面 v
发布评论