vue样式的绑定

 

1.动态行间样式

• 可以直接写

<div :style="{color:'#fff',background:bg1,fontSize:'30px'}">天道酬勤</div>

• 封装成json格式

<div :style="json">人道酬善</div>

data:{//属性
                json:{
                    background:"purple",
                    color:'#fff'
       },

 

2.动态的类名

• v-bind:class="变量"

   /* css */
  .blue {
              background: blue;
         }

   

  <!--  HTML-->
  <div :class="selectName"></div>

   

  //js
  data: {//属性
                  selectName: 'blue',
         }

   

• 2.v-bind:class="[三元]"

  <div class="box" :class="[isRed?'red':'blue']"></div>
  <!--  red加了''直接代表类名，不是变量不要在再定义了-->

   

  <!-- 导航 点击切换样式-->
          <div class="nav">
              <span v-for="(item,index) in types" :key="item" :class="index==n?'select':''" @:click="n=index">{{item}}</span>
          </div>

   

  data:{
      n:-1,//标记选中的下标
      types: ['美妆护肤', '运动健身', '电脑办公', '电子产品'],
  }

   

• 3.使用json方式动态更换类名:class="{class1:true,class2:false,...}-->

  <!-- 0-red 1-blue 2-yellow 3-red 4-blue 5-yellow -->
          <div class="item" v-for="(item,index) in movies" :key="item.id" 
          :class="{'red':index%3===0,'blue':index%3===1,'yellow':index%3===2}"
          >