html - 动态地将标题附加到图像

Question

首先，我有图像（开关），它们有名称（K1、K2、K3、..）。我想将显示的名称 K1 附加到相应的（显示的）开关上，如下图所示。

这是我目前正在使用的代码：

<div id="app">
 <fieldset style="background-color: rgb(181, 207, 209);">
 <h1>simTest server</h1>
     <hr>
     <div class="circuitplan">
         <div v-for="(val, key, index) in switchObj" v-bind:key="key">
               <div>
                 <span class="switch" v-bind:class="{ closed: val==='closed', opened: val==='opened', K1: key==='K1', K2: key==='K2', K3: key==='K3', K4: key==='K4', K5: key==='K5'}" @click="onSwitchClick(key)"></span>
               </div>
         </div>
     </div>
 </fieldset>

我之前尝试过的是，我将开关的名称也称为“{{ key }}”放在这里：

<span class="switch" v-bind:class="{ closed: val==='closed', opened: val==='opened', K1: key==='K1', K2: key==='K2', K3: key==='K3', K4: key==='K4', K5: key==='K5'}" @click="onSwitchClick(key)">{{ key }}</span>

所有可用开关的名称都显示出来了，但很混乱。我尝试的另一件事是使用 :hover 在将鼠标悬停在它们上方时显示开关，作为（必须承认不好）解决方法。

任何人都知道如何实现这个“功能”？提前谢谢！

标签： htmlcssvue.jscaption