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

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

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

                  
                  

                       {{ item.mctype.slice(0, 1) + (item.mctype.slice(0, 1) === '动' || item.mctype.slice(0, 1) === '静' ? '态' : '位') }}
                          

                  

                    
                    
                      
                      {{ item.mcName }}
                  

                  

                     {{ item.mctype == '岗位动态名册' ? item.cadreCount + '个' : item.cadreCount + '人' }} 
                    

                      
                      
                    
                  
                

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

在css里：

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

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

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

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