成像您正在开发一个应用程序，并且您想根据某些条件在浏览器中渲染某些数据，或者您有一系列要访问并在浏览器中显示的数据，我们如何才能实现此VUE ？在本指南中，我们将在VUE中学习List rendering和conditional rendering，以及如何利用v-if和v-for指令的力量。

列表渲染

v-for指令用于渲染一系列项目或对象。语法非常简单易用。 item in items是构成的单个item，而items是我们正在浏览的列表。

用V-For渲染阵列

//template
<div v-for="name in names">{{ name }}</div>

//script

const names = ref(["Vue", "Nuxt", "Vite", "Vitepress"]

v-for将循环穿过names数组，并在浏览器中显示每个名称。

用v-for渲染对象

v-for也可以用来通过对象迭代，迭代的序列将依赖于在对象上调用Object.keys()的结果：

//template
<ul>
  <li v-for="value in myObject">
    {{ value }}
  </li>
</ul>

//script
const myObject = reactive({
  title: 'How to render lists in Vue',
  author: 'KingstonCodes',
  publishedAt: '2023-08-10'
})

可选，我们还可以将每个属性的密钥包括在对象<li v-for="(value, key) in myObject"> {{ value }} </li>

V-For和Key

为了在将项目的状态渲染到浏览器时，我们可以引入唯一的key属性以参考列表中的每个项目：

<div v-for="item in items" :key="item.id">
 {{ item }}
</div>

v-for指令非常重要，因为它可以轻松地将列表列入浏览器。

有条件的渲染

我们可以使用v-show指令或v-if指令将任何内容渲染到浏览器。 v-show和v-if均可用于实现相同的结果，区别在于，v-show指令仅切换该元素的CSS display属性，因此，带有V-Show指令的元素将始终存在于浏览器中。

V-Show

让我们看看用v-show指令的条件渲染的示例。

<div v-show="isTrue">
//content here
</div>

//script
const isTrue = ref(true)

只要isTrue保留true，div始终将在浏览器中呈现，同样，当isTrue为false时，div从浏览器中消失。

v-if

像v-show指令一样，v-if指令也用于将渲染元素的条件呈现到浏览器，仅当指令的表达式返回一个真相值时才会渲染该元素。

<div v-if="isTrue">
//content here
</div>

//script
const isTrue = ref(true)

v-if指令和v-show指令之间的另一个区别是，我们可以使用v-else和v-else-if指令来匹配指令表达式不正确的情况。

v-if带V-Else和V-Else-if

<div v-if="isTrue < 0">
//display content here
</div>

<div v-else-if="isTrue > 0">
//display content here
</div>

<div v-else>
//display content here
</div>

//script
const isTrue = ref(0)

喜欢JavaScript中的传统if，else if和else，v-if，v-else和v-else-if可用于获得相似的结果。

在上面的示例中，v-else块将运行，因为isTrue均未小于或大于零。同样，v-if块或v-else-if块将根据isTrue大于还是小于0

V-For v-if

有时，我们可能希望在满足某些条件时向浏览器渲染列表，为了实现此目的，我们需要使用v-for首先循环浏览列表，然后在显示之前检查v-if是否满足了条件。

问题是，在同一元素上使用v-for和v-if指令不是一个好习惯，因为当它们存在于同一元素上时，v-if将比v-for具有更高的优先级，这意味着v-if不会是能够从v-for块访问变量。

<!--
This will not work
-->
<li v-for="todo in todos" v-if="!todo.isComplete">
  {{ todo.name }}
</li>

要解决此问题，让我们将v-for指令移至包装标签。

<template v-for="todo in todos"> 
<li v-if="!todo.isComplete">
  {{ todo.name }}
</li>
</template>

就是这样，v-for块将始终在v-if块之前执行，从而允许v-if指令访问v-for变量并执行操作。