Questions about the vue binding style?

the effect I want is this:

my code:

<div class="abs">
    <div class="items" v-for="item in dataTable">
        <span v-for="mul in item.mul" :style="{top:myTop}">
            <i>{{mul.name}}</i>
        </span>                                                    
    </div>                                                                                
</div>

myTop:"5px",
dataHeader:["","","",""],
dataNumber:[6,5,4,3,2,1],
dataTable:[
    {
        mul:[
            {
                name:"",
                rank:[5]
            },                        
            {
                name:"",
                rank:[2]
            }
        ]
    },
]

question:
< span 5px for = "mul in item.mul": style= "{top:myTop}" >
the problem now is the style that shares 5px. I don"t want to do this. I want one 5px and another 80px. How can I change it?

Element-ui vue.js css html5 javascript

Nov.03,2021

why don't you just write mytop in mul

80 what is the condition such as
< span v 80px':myTop force = "mul in item.mul": style= "{top:data.name=' test'? '80px':myTop}" >

how many styles do you want to change? just write a class overlay.
for example,
the third one is 80px; : class= "index==2?': 'newTop'"

 <div class="items" v-for="item in dataTable">
    <span v-for="mul in item.mul" :style="{top:myTop}" :class="index==2 ?'':'newTop'" >
        <i>{{mul.name}}</i>
    </span>                                                    
</div>    
.newTop{margin-top:80px;}

Previous: There are regular anomalies in the calculation results of Vue calculation attributes.

Next: Use lerna to manage npm packages how to Synchronize packages updated by other projects