源码位置vue/src/complier/codegen/index.js
function genElement (el: ASTElement, state: CodegenState): string {
if (el.parent) {
el.pre = el.pre || el.parent.pre
}
if (el.staticRoot && !el.staticProcessed) {
return genStatic(el, state)
} else if (el.once && !el.onceProcessed) {
return genOnce(el, state)
} else if (el.for && !el.forProcessed) {
return genFor(el, state)
} else if (el.if && !el.ifProcessed) {
return genIf(el, state)
} else if (el.tag === 'template' && !el.slotTarget && !state.pre) {
return genChildren(el, state) || 'void 0'
} else if (el.tag === 'slot') {
return genSlot(el, state)
} else {
// component or element
let code
if (el.component) {
code = genComponent(el.component, el, state)
} else {
let data
if (!el.plain || (el.pre && state.maybeComponent(el))) {
data = genData(el, state)
}
const children = el.inlineTemplate ? null : genChildren(el, state, true)
code = `_c('${el.tag}'${
data ? `,${data}` : '' // data
}${
children ? `,${children}` : '' // children
})`
}
// module transforms
for (let i = 0; i < state.transforms.length; i++) {
code = state.transforms[i](el, code)
}
return code
}
}
在处于同一节点的时候,v-for 优先级比 v-if 高。
这意味着 v-if 将分别重复运行于每个 v-for 循环中。
即——先运行v-for 的循环,然后在每一个v-for 的循环中,
再进行 v-if 的条件对比。所以,不推荐v-if和v-for同时使用。
vue中的内置指令都有相应的解析函数,执行顺序是通过简单的
if else-if语法来确定的。在genFor的函数里,
最后会return一个自运行函数,再次调用genElement。
虽然v-for和v-if可以放一起,
但我们要避免这种写法,在官网中也有明确指出,这会造成性能浪费。
第三种方案
在外侧嵌套一层template,判断v-if,再在里面v-for循环
第一种方案
<template v-for="(item, index) in list" :key="index">
<div v-if="item.isShow">{{item.title}}</div>
</template>
第二种方案
计算属性(推荐使用)
<template>
<div>
<div v-for="(user,index) in activeUsers" :key="user.index" >
{{ user.name }}
</div>
</div>
</template>
<script>
export default {
name:'A',
data () {
return {
users: [{name: 'aaa',isShow: true},
{name: 'bbb',isShow: false}]
};
},
computed: {//通过计算属性过滤掉列表中不需要显示的项目
activeUsers: function () {
return this.users.filter(function (user) {
return user.isShow;//返回isShow=true的项,添加到activeUsers数组
})
}
}
};
</script>