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

<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不管是什么级别都是灰色

图片

望采纳


可以在模板中使用 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>

可以把 style 换成 v-bind:class="" 然后把 三目里的判断 写成个方法 。方法返回 一个类名 。

```javascript
<template>
  <div>
    <!-- 需求:根据不同的字段siteType 显示不同的背景颜色 ，siteStatus状态为2不管siteType是什么背景颜色都是灰色-->
    <!-- 例如：国家级的是一个颜色 -->
    <ul>
      <li v-for="item in contentList" :key="item.id">
        <div :style="item.style">{{ 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,style:{color:red} },
        { id: 22, siteType: "省级", siteLogoUrl: "https://seopic.699pic.com/photo/50060/0017.jpg_wh1200.jpg", siteStatus: 2,style:{color:black} },
        { id: 31, siteType: "市级", siteLogoUrl: "https://seopic.699pic.com/photo/50060/0017.jpg_wh1200.jpg", siteStatus: 2,style:{color:black} },
        { id: 61, siteType: "国家级", siteLogoUrl: "https://seopic.699pic.com/photo/50060/0017.jpg_wh1200.jpg", siteStatus: 1,style:{color:yellow} },
        { id: 71, siteType: "市级", siteLogoUrl: "https://seopic.699pic.com/photo/50060/0017.jpg_wh1200.jpg", siteStatus: 1,style:{color:yellow },
      ], // 数据渲染区域
    }
  }
}
</script>

<style scoped>
</style>

```