Change CSS of instances from the same class using vue.js

问题

As of now, I am struggling to place images of switches at different positions on my front-end. I have a class "switch", which is bound to closed or opened, dependent on its current state (open or closed). Since the switches need to be placed on a circuit plan, I need to set each of their CSS manually by editing each position individually, but keeping the class for general styling, I only need it for changing positions of the respective switches.

Like so:

*switch.firstone {position: relative, top: 50px, etc.}

switch.secondone {position: relative, left: 20px, etc.}*

I'm using vue.js and the switches are created by a JSON-RPC response from the server, which contains the information of the switches (amount, name, state closed or opened). I just can't figure out how I can give each displayed switch an additional individual CSS while using another CSS for the entire class.

Code example is as follows:

<div v-for="(val, key, index) in switchObj" v-bind:key="key">
    <span class="switch" v-bind:class="{ closed: val==='closed', opened: val==='opened'}" @click="onSwitchClick(key)"></span>
</div>

switchObj is the object which gets updated after the client receives the respond from the server. The class switch is the one containing the CSS for the switches, for all. Thank you in advance!

For a better illustration of the problem: see this image
the K1 switch should be placed on the left side, whereas K2 should be on the right side.

来源：https://stackoverflow.com/questions/65201336/change-css-of-instances-from-the-same-class-using-vue-js

标签

html

css

Vue.js