在 Vue 中 v-if 中使用 v-for 迭代器的字符串表示形式

vue.js

2024-03-08 09:45:32

在 v-for 中以字符串形式编写 v-if 中的迭代器

在 Vue 中，使用 v-for 循环生成重复元素非常常见，但有时您可能需要在 v-if 语句中包含循环的迭代器号。然而，直接在 v-if 中使用 v-for 的索引号似乎是不可能的。

问题

想象一下这样一个场景：您有四个预告，每个预告都有不同的标题、图标和文本。您希望在 v-if 语句中使用 v-for 循环来重复这些预告，但您无法直接在 v-if 中访问 v-for 的索引号来选择相应的预告值。

解决方案

为了解决这个问题，我们可以使用一个技巧，即在组件的脚本中创建一个包含预告数据的数组。然后，我们在 v-for 循环中迭代这个数组，并在 v-if 语句中使用索引号来访问数组中的相应预告数据。

以下是修改后的代码示例：

<script setup lang="ts">
const teasers = [
  {
    title: '预告 1',
    icon: 'sun',
    textBefore: '文本 1',
    textColor: '绿色',
    textAfter: '更多文本 1'
  },
  {
    title: '预告 2',
    icon: 'moon',
    textBefore: '文本 2',
    textColor: '蓝色',
    textAfter: '更多文本 2'
  },
  {
    title: '预告 3',
    icon: 'misc',
    textBefore: '文本 3',
    textColor: '红色',
    textAfter: '更多文本 3'
  },
  {
    title: '预告 4',
    icon: 'sun',
    textBefore: '文本 4',
    textColor: '黄色',
    textAfter: '更多文本 4'
  }
];
</script>

<template>
  <div v-for="(teaser, n) in teasers" :key="n">
    <div v-if="teaser.icon === 'sun' || teaser.icon === 'moon' || teaser.icon === 'misc'" class="material-symbols-rounded icon">{{ teaser.icon === 'sun' ? 'sunny' : teaser.icon === 'moon' ? 'clear_night' : teaser.icon === 'misc' ? 'brightness_4' : 'clear_night' }}</div>
    <span>{{ teaser.textBefore }}<span v-if="teaser.textColor" class="text text--color">{{ ' ' + teaser.textColor }}</span><span v-if="teaser.textAfter" class="text text--after">{{ ' ' + teaser.textAfter }}</span></span>
  </div>
</template>