如何让一个盒子因为内容不同，而样式也不同呢

最新推荐文章于 2024-09-28 16:29:52 发布

阿尭

最新推荐文章于 2024-09-28 16:29:52 发布

阅读量387

点赞数 1

文章标签： html 前端

本文链接：https://blog.csdn.net/qq_63322025/article/details/131643456

版权

例如，每个盒子上面都有一个色块，静态，动态，岗位。如何让不同的内容就有不同的字体颜色和背景呢？

可以给每个盒子重复一样的步骤，但是显然最简单的方法是用一个循环。循环遍历数据，直接写一个盒子的布局就好了。一样的盒子可以这样做，但是不一样的标记我们应该如何做？

<li v-for="item in dataRollList">
                  <!-- <div :class="item.myTypeClass" class="title">{{ item.mctype.slice(0, 1) }}态</div> -->
                  <div class="title" 
                  :class="{ 'yellow-background': item.mctype === '动态名册', 
                            'blue-background': item.mctype === '静态名册', 
                            'green-background': item.mctype === '岗位动态名册' 
                          }">
                       {{ item.mctype.slice(0, 1) + (item.mctype.slice(0, 1) === '动' || item.mctype.slice(0, 1) === '静' ? '态' : '位') }}
                          </div>

                  <div class="name" @click="watchCadreTab(item)">
                    <!-- <i class="el-icon-user-solid"></i> -->
                    <span class="name-n">
                      <img src="../../../static/images/roll/people-icon.png" alt="">
                      {{ item.mcName }}</span>
                  </div>

                  <div class="foot">
                    <span class="count"> {{ item.mctype == '岗位动态名册' ? item.cadreCount + '个' : item.cadreCount + '人' }} </span>
                    <div class="operation">
                      <i class="el-icon-edit-outline" @click="editRoll(item)"></i>
                      <i class="el-icon-delete" @click="deleteRoll(item)"></i>
                    </div>
                  </div>
                </li>

绑定一个class，通过内容来绑定不同的样式。

在css里：

            .yellow-background {
              background-color: #FFE3AC;
              color: #F6990D;
            }

            .blue-background {
              background-color: #D1E9FB;
              color: #3499E5;
            }

            .green-background {
              background-color: #E4F3D8;
              color: #75BE3B;
            }

这样我们就可以根据不同的内容来给定不同的样式啦！