v-if 和v-for的联合规则及示例

在这里插入图片描述

第073个

查看专栏目录: VUE ------ element UI

专栏目标

在vue和element UI联合技术栈的操控下，本专栏提供行之有效的源代码示例和信息点介绍，做到灵活运用。

提供vue2的一些基本操作：安装、引用，模板使用，computed，watch，生命周期(beforeCreate，created,beforeMount，mounted, beforeUpdate，updated, beforeDestroy，destroyed，activated，deactivated，errorCaptured，components，)、 $root , $parent , $children , $slots , $refs , props, $emit , eventbus ,provide / inject, Vue.observable, $listeners, $attrs, $nextTick , v-for, v-if, v-else,v-else-if，v-on，v-pre，v-cloak，v-once，v-model， v-html, v-text, keep-alive，slot-scope， filters, v-bind，.stop, .native, directives，mixin，render，国际化，Vue Router等

本文章目录

- 专栏目标
- v-if: 条件渲染
- - 使用规则：
- v-for: 列表渲染
- - 使用规则：
- v-if和v-for的结合使用
- - v-if和v-for结合使用的代码示例
- 总结

在Vue.js中，v-if和v-for是两个常用的指令，用于控制DOM元素的渲染。它们分别对应于条件渲染和列表渲染。正确使用这两个指令对于编写高效的Vue应用至关重要。以下是关于v-if和v-for的使用规则的详细解释：

在这里插入图片描述

v-if: 条件渲染

v-if指令根据表达式的值（真/假）来决定是否渲染一个元素。如果表达式的值为假（false），则元素及其子元素不会被渲染到DOM中；如果为真（true），则元素会被渲染。

使用规则：

单一用途： v-if适用于条件不经常改变的场景。每次条件改变时，Vue会创建或销毁元素，这意味着与该元素关联的数据绑定和事件监听器也会被创建或销毁。

块级作用域： v-if具有块级作用域，这意味着它会影响其内部所有子元素的渲染。

性能考虑：频繁切换v-if可能会导致性能问题，因为每次状态改变都会导致元素的重新渲染。

v-for: 列表渲染

v-for指令用于渲染列表，可以迭代数组或对象。它提供了一种方便的方式来渲染集合类型的数据。

使用规则：

迭代源： v-for可以迭代数组或对象。当迭代数组时，它会遍历数组的元素；当迭代对象时，它会遍历对象的键值对。

索引： 当迭代数组时，v-for提供两个变量：item表示当前项，index表示当前项的索引。当迭代对象时，key和value分别表示对象的键和值。

优先级： v-for的优先级高于v-if。如果需要在同一元素上同时使用v-for和v-if，应将v-for放在前面。

性能考虑： v-for适用于渲染大量元素的情况。为了提高性能，可以使用key属性来帮助Vue跟踪每个节点的身份，从而重用和重新排序现有元素。

v-if和v-for的结合使用

在某些情况下，我们可能需要结合使用v-if和v-for来渲染一个条件化的列表。在这种情况下，应该注意以下规则：

正确的顺序： 由于v-for的优先级高于v-if，应该先写v-for后写v-if，以确保v-for的正确执行。

避免不必要的渲染：如果列表很大，但只有少数几个元素满足条件，首先使用v-if过滤掉不需要渲染的元素，然后再使用v-for渲染剩余的元素。

使用标签： 如果需要在同一元素上同时使用v-for和v-if，推荐的做法是使用<template>标签包裹它们，这样可以确保v-for的作用域不会扩散到其他元素。

优化性能：当列表很长且需要频繁更新时，应该考虑使用虚拟滚动（如vue-virtual-scroller插件）来提高性能。

v-if和v-for结合使用的代码示例

<template><div><ul><li v-for="(item, index) in items" :key="index"><span v-if="item.isActive">{{ item.name }}</span><span v-else class="inactive">{{ item.name }}</span></li></ul></div>
</template><script>
export default {data() {return {items: [{ name: 'Item 1', isActive: true },{ name: 'Item 2', isActive: false },{ name: 'Item 3', isActive: true },{ name: 'Item 4', isActive: false }]};}
};
</script><style>
.inactive {color: #ccc;
}
</style>

在这个例子中，我们使用v-for指令遍历一个名为items的数组，并为每个元素创建一个li标签。然后，我们使用v-if指令根据isActive属性的值来决定是否显示该元素的文本内容。如果isActive为真，则显示文本内容；否则，将文本内容设置为灰色并添加一个inactive类名。最后，我们使用:key绑定来确保每个li元素都有一个唯一的键值，以提高性能。