关于vue绑定样式的问题?

Question

我想要的效果是这样的：

我的代码：

<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]
            }
        ]
    },
]

问题：
<span v-for="mul in item.mul" :style="{top:myTop}">
现在的问题是<span>公用着5px的样式。我不想这样，我想一个<span> 5px，另外一个<span>80px。这样我该怎么改呢？

Answer 1

你把mytop写到mul里面不就好了

Answer 2

80的那个 是啥条件 比如说
<span v-for="mul in item.mul" :style="{top:data.name==='测试'?'80px':myTop}">

Answer 3

你想第几个样式改变 那就写一个class 覆盖就好了
举个例子
第三个为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;}