vue通过v-for循环出来多个相同样式的div,根据index值给每个div添加不同的class名
<divv-for="item in contractPartyBList":key="item.itemKey"@click="dian(item.itemKey)":class="gernerateClass(item.itemKey)"><div class="bee-name">{{ item.itemName }}<div v-if="item.i...
·
<div
v-for="item in contractPartyBList"
:key="item.itemKey"
@click="dian(item.itemKey)"
:class="gernerateClass(item.itemKey)"
>
<div class="bee-name">
{{ item.itemName }}
<div v-if="item.itemKey == 1" style="padding-top: 5px">
Hubei little bee
</div>
<div v-else-if="item.itemKey == 2" style="padding-top: 5px">
Wheat sugar linggong
</div>
<div v-else-if="item.itemKey == 3" style="padding-top: 5px">
Hunan Jinbai
</div>
</div>
<img
v-if="item.itemKey == 1"
width="60px"
height="60px"
style="margin-left: 15px"
src="../../assets/images/gongsia.png"
alt=""
/>
<img
v-else-if="item.itemKey == 2"
width="60px"
style="margin-left: 25px"
height="60px"
src="../../assets/images/gongsis.png"
alt=""
/>
<img
v-else-if="item.itemKey == 3"
width="60px"
height="60px"
src="../../assets/images/gongsi.png"
alt=""
/>
</div>
<script>
export default {
data() {
return {
}
},
methods: {
// 动态添加样式
gernerateClass(index) {
return 'subject_sign' + index;
},
// 加上这个方法就可以为每个div添加一个id 为subject_sign1,subject_sign2,
// subject_sign3................
}
};
</script>
<style lang="scss" scoped>
.subject_sign1 {
width: 90%;
height: 90px;
background: linear-gradient(270deg, #ffda51 0%, rgba(255, 153, 0, 0.7) 100%);
border-radius: 16px;
margin: auto;
margin-top: 10px;
display: flex;
justify-content: space-around;
align-items: center;
}
.subject_sign2 {
width: 90%;
height: 90px;
background: linear-gradient(270deg, #a6dffe 0%, #56b6f3 100%);
border-radius: 16px;
margin: auto;
margin-top: 10px;
display: flex;
justify-content: space-around;
align-items: center;
}
.subject_sign3 {
width: 90%;
height: 90px;
background: linear-gradient(270deg, #f4b4d5 0%, #ed83b9 100%);
border-radius: 16px;
margin: auto;
margin-top: 10px;
display: flex;
justify-content: space-around;
align-items: center;
}
</style>
更多推荐
已为社区贡献3条内容
所有评论(0)