如何使用Vue与数组实现v-if条件判断？请求技术帮助

问题说明 #

我已经加载了HTML形式的尺码值XS、S、M以及颜色Black、White，同时有展示各颜色可用尺码的JSON数据。我希望通过variant_selection.option1（当前选中的颜色）与HTML加载的尺码值，判断对应尺码组合是否在variant_selection.size数组中，当组合不存在时显示<span>标签。

示例JSON数据：

variant_selection: {
  option1: "Black",
  option2: "XS",
  size: [
    "Black / XS", /// 仅黑色有XS尺码
    "Black / S",
    "Black / M",
    "White / S",
    "White / M",
  ],
}

我试了下面的代码，但完全没用：

<span v-if="'variant_selection.option1 / {{ value }}' !== 'variant_selection.size.includes(variant_selection.option1) / {{ value }}' ">.</span>

问题出在哪 #

你写的代码有几个明显错误：

1. Vue指令的表达式里不需要用{{ }}插值，直接写变量名就行
2. 字符串拼接的方式完全错了，没把当前颜色和尺码值正确组合成目标格式
3. 判断逻辑混乱，应该检查拼接后的字符串是否不在可用尺码数组里

正确代码写法 #

你需要先把当前选中的颜色和尺码值拼成颜色 / 尺码的格式，再用includes判断这个组合是否在size数组中，取反后作为v-if的条件：

<span v-if="!variant_selection.size.includes(`${variant_selection.option1} / ${value}`)">.</span>

简单解释 #

• 用模板字符串`${variant_selection.option1} / ${value}`生成完整的尺码组合（比如Black / XS）
• variant_selection.size.includes(...)检查这个组合是否在可用列表里
• 前面加!表示“当组合不存在时”，才显示这个span

如果你的Vue版本不支持模板字符串，也可以用普通字符串拼接：

<span v-if="!variant_selection.size.includes(variant_selection.option1 + ' / ' + value)">.</span>

内容的提问来源于stack exchange，提问作者Elkazi