Блог

Во-первых, у меня есть изображения (переключатели), которые имеют имена (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>
 

Все названия доступных переключателей отображались, но хаотично. Еще одна вещь, которую я пытался использовать: наведите указатель мыши, чтобы отобразить переключатели при наведении на них, в качестве (должен признать, плохого) обходного пути.

У кого-нибудь есть хорошая идея, как реализовать эту «функцию»? Заранее спасибо!