为什么vue中的v-if和v-for不能一起使用

一.v-if和v-for的作用

• v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true值的时候被渲染。
• v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组或者对象，而 item 则是被迭代的数组元素的别名，v-for在使用的时候，要设置key的值，并且这个值是独一无二的，方便diff算法进行优化

二.两者的优先级

在使用的时候v-for的优先级高于v-if

三.注意问题

永远不要把 v-if 和 v-for 同时用在同一个元素上，带来性能方面的浪费（每次渲染都会先循环再进行条件判断）
如何避免出现这种情况，将v-if移动到上一层容器，在这一层进行v-if判断，然后在内部进行v-for循环

<template><ul v-if="isShow"><li v-for="item in list" :key="item">{{ item }}</li></ul>
</template><script>
export default {data() {return {isShow: false,list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],};},
};
</script><style>
</style>

如果条件出现在循环内部，可通过计算属性computed提前过滤掉那些不需要显示的项，因为v-for的优先级高于v-if，每一次都要遍历数组，造成不必要的计算，影响性能，比如我们需要在页面中遍历10个li标签，但是只需要显示index=5的li标签内容，其余全部隐藏

<template><ul><li v-for="item in activeList" :key="item">{{ item }}</li></ul>
</template><script>
export default {data() {return {list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],};},computed: {activeList() {return this.list.filter((item, index) => index == 5);},},
};
</script><style>
</style>

用计算属性进行处理后，它只会返回一个满足条件的数组，这样在遍历的时候，我们只需要遍历这个返回的新数组，性能方面得到很好的提升。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！