zoukankan      html  css  js  c++  java
  • 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}"
              >

       

  • 相关阅读:
    LeetCode之Z字形变换
    统计文本中字母的频次(不区分大小写)
    凯撒密码实现
    DES 实现
    cmake 学习
    ubuntu18 ssh服务器拒绝连了密码
    Ubuntu13 安装vim
    面向对象和面向过程的理解
    图像变换
    基于关键帧的RGB-D视觉惯性里程计
  • 原文地址:https://www.cnblogs.com/ximenchuifa/p/13735151.html
Copyright © 2011-2022 走看看