vue如何通过不同的汉子字段渲染不同的样式？

Question

<template>
  <div>
    <!-- 需求:根据不同的字段siteType 显示不同的背景颜色 ，siteStatus状态为2不管siteType是什么背景颜色都是灰色-->
    <!-- 例如：国家级的是一个颜色 -->
    <ul>
      <li v-for="item in contentList" :key="item.id">
        <div style="width:200px;height: 100px;">{{ item.siteType }}</div>
      </li>
    </ul>
  </div>
</template>
<script>

export default {
  data() {
    return {
      contentList: [
        { id: 10, siteType: "国家级", siteLogoUrl: "https://seopic.699pic.com/photo/50060/0017.jpg_wh1200.jpg", siteStatus: 1 },
        { id: 22, siteType: "省级", siteLogoUrl: "https://seopic.699pic.com/photo/50060/0017.jpg_wh1200.jpg", siteStatus: 2 },
        { id: 31, siteType: "市级", siteLogoUrl: "https://seopic.699pic.com/photo/50060/0017.jpg_wh1200.jpg", siteStatus: 2 },
        { id: 61, siteType: "国家级", siteLogoUrl: "https://seopic.699pic.com/photo/50060/0017.jpg_wh1200.jpg", siteStatus: 1 },
        { id: 71, siteType: "市级", siteLogoUrl: "https://seopic.699pic.com/photo/50060/0017.jpg_wh1200.jpg", siteStatus: 1 },
      ], // 数据渲染区域
    }
  }
}
</script>

<style scoped>
</style>

例如，国家级的是一个背景颜色，其他的同理，如果siteStatus字段为2不管是什么级别都是灰色

图片

Answer 1

望采纳


可以在模板中使用 v-bind:style 和三元运算符来根据不同的字段来渲染不同的样式。

例如在 li 元素的 v-bind:style 属性中使用三元运算符来根据 siteType 和 siteStatus 字段的值来设置背景颜色：

<li v-for="item in contentList" :key="item.id" v-bind:style="{ backgroundColor: item.siteStatus === 2 ? '#ccc' : item.siteType === '国家级' ? '#f00' : item.siteType === '省级' ? '#0f0' : item.siteType === '市级' ? '#00f' : '#fff' }">
  <div style="width:200px;height: 100px;">{{ item.siteType }}</div>
</li>