Vue 3 中的条件渲染和列表渲染：让你的 UI 动态起来

在 Vue.js 中，条件渲染和列表渲染是两个强大的工具，它们可以帮助你创建动态且交互的 UI。它们允许你根据特定条件显示或隐藏元素，以及根据数据数组中的项目渲染列表。

条件渲染

条件渲染允许你根据布尔表达式的值来控制元素的可见性。这对于创建动态内容非常有用，例如根据用户输入或应用程序状态显示或隐藏特定组件。

在 Vue.js 中，你可以使用 v-if 和 v-else 指令实现条件渲染。

<template>
  <div>
    <p v-if="show">显示</p>
    <p v-else>隐藏</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true
    }
  }
}
</script>

在这个示例中，如果 show 数据值为 true，则会渲染 <p>显示</p> 元素。否则，将渲染 <p>隐藏</p> 元素。

列表渲染

列表渲染允许你根据数据数组中的项目动态渲染列表。这对于创建可重复且易于维护的 UI 非常有用。

在 Vue.js 中，可以使用 v-for 指令实现列表渲染。

<template>
  <ul>
    <li v-for="item in items">{{ item }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: ['苹果', '香蕉', '橘子']
    }
  }
}
</script>

在这个示例中，v-for 指令将遍历 items 数据数组，并为数组中的每个项目渲染一个 <li> 元素。

在 Vue 3 中使用条件渲染和列表渲染

Vue 3 引入了几个新功能，使条件渲染和列表渲染更加灵活和强大。

v-if 和 v-else 的缩写语法

Vue 3 引入了 v-if 和 v-else 指令的缩写语法，使其更易于编写代码。

<template>
  <p v-if="show">显示</p>
  <p v-else-if="show2">显示2</p>
  <p v-else>隐藏</p>
</template>

v-for 的缩写语法

Vue 3 也引入了 v-for 指令的缩写语法，使你可以在更少的代码中完成更多的事情。

<template>
  <ul>
    <li v-for="item in items" :key="item">{{ item }}</li>
  </ul>
</template>

Track-by

Vue 3 还引入了 track-by 属性，它允许你指定列表项的唯一标识符。这对于优化列表渲染非常有用，因为它允许 Vue 跟踪数组中的更改并只重新渲染受影响的元素。

<template>
  <ul>
    <li v-for="item in items" :key="item.id" :item="item">{{ item.name }}</li>
  </ul>
</template>

结论

条件渲染和列表渲染是 Vue.js 中用于创建动态且交互式 UI 的强大工具。通过理解和利用这些工具，你可以创建更强大、更灵活的应用程序。