Vue中如何判断属性值与容器ID相等并动态显示容器？

问题出在你模板里的id引用逻辑：Vue模板中的表达式是基于组件实例上下文的，你写activeWindow === id时，Vue会去组件实例上找名为id的属性，而非当前div的DOM id属性，所以自然匹配失败。

给你两种可行的解决方式：

方式一：直接在v-if中匹配对应id字符串 #

既然每个div的id是固定的，直接在v-if里写对应的字符串即可，这样能保证判断逻辑准确：

private activeWindow = 'activeWindow';

<div v-if="activeWindow === 'activeWindow'" id="activeWindow">
 <h1>This window is active</h1>
</div>
<div v-if="activeWindow === 'activeWindow1'" id="activeWindow1">
  <h1>This window is active</h1>
</div>

方式二：用数组循环实现动态渲染（推荐） #

如果需要新增更多窗口，重复写div会很冗余，建议用数组维护所有窗口的配置，通过v-for循环渲染，既保证动态性又减少重复代码：

// 组件脚本
private activeWindow = 'activeWindow';
// 维护所有窗口的id和内容
private windowList = [
  { id: 'activeWindow', content: 'This window is active' },
  { id: 'activeWindow1', content: 'This window is active' }
];

// 模板部分
<template>
  <div 
    v-for="item in windowList" 
    :key="item.id"
    v-if="activeWindow === item.id"
    :id="item.id"
  >
    <h1>{{ item.content }}</h1>
  </div>
</template>

后续新增窗口只需要在windowList数组里添加对象即可，不用修改模板结构。

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