Vue.js 列表渲染 v-for 和 v-if

Vue.js 是一个流行的前端框架，它提供了列表渲染以及条件渲染的功能。在 Vue.js 中，我们可以使用 v-for 和 v-if 指令来渲染列表和根据条件来渲染内容。

列表渲染 v-for

列表渲染是 Vue.js 中最常见的用例之一。我们可以使用 v-for 指令来循环遍历数组或对象，并将数组或对象中的每个元素渲染到 HTML 中。

<ul>
  <li v-for="(item, index) in items" :key="index">{{ item }}</li>
</ul>

上述代码中，我们使用 v-for 指令循环遍历了名为 items 的数组，并将数组中的每个元素渲染为一个列表项。v-for 指令中的 (item, index) 表示我们可以访问数组中的每个元素，其中 item 表示每个元素的值，index 表示每个元素的索引。我们还使用了 :key 绑定将 index 传递给每个列表项，这有助于 Vue.js 更高效地渲染列表。

在循环遍历对象时，语法略有不同：

<ul>
  <li v-for="(value, key) in object" :key="key">{{ key }}: {{ value }}</li>
</ul>

在上述代码中，我们使用 v-for 指令循环遍历了名为 object 的对象，并将对象中的每个属性渲染为列表项。v-for 指令中的 (value, key) 表示我们可以访问对象中的每个属性，其中 value 表示每个属性的值，key 表示每个属性的键。

条件渲染 v-if

条件渲染是 Vue.js 中非常有用的功能，它可以让我们根据某个条件来控制元素是否被渲染到 HTML 中。我们可以使用 v-if 和 v-else 指令来实现条件渲染。

<div v-if="isTrue">Hello, World!</div>
<div v-else>Goodbye, World!</div>

在上述代码中，我们使用 v-if 指令根据 isTrue 的值，决定了渲染哪个 div 元素。如果 isTrue 的值为 true，那么将渲染第一个 div 元素，否则将渲染第二个 div 元素。

我们还可以使用 v-show 指令来根据条件控制元素的显示与隐藏。v-show 指令实际上是将元素的 display 属性设置为 none，而不是从 DOM 中移除它。

<div v-show="isShow">Hello, World!</div>

在上述代码中，我们使用 v-show 指令来根据 isShow 的值控制 div 元素的显示与隐藏。

v-for 和 v-if 一起使用

当我们需要根据某个条件渲染列表项时，可以将 v-for 和 v-if 指令结合使用。

<ul>
  <li v-for="item in items" v-if="item.isVisible">{{ item.value }}</li>
</ul>

在上述代码中，我们使用 v-for 指令循环遍历了名为 items 的数组，并将数组中的每个元素渲染为一个列表项。同时，使用 v-if 指令判断当前元素是否需要显示。

总结

Vue.js 中的列表渲染和条件渲染是非常有用的功能，它们可以帮助我们将数据渲染到 HTML 中，并根据条件来控制元素的显示与隐藏。我们可以使用 v-for 和 v-if 指令来实现这些功能。需要注意的是，在使用 v-for 和 v-if 指令时，要确保我们在性能上是做得很好的。