Vue绑定css 样式常用几种方式（class---style)

@[TOC]Vue绑定css 样式常用几种方式（class—style)

class 绑定

在我工作中 ： 一般适用于 写好一个类直接 classy样式 用于**css**样式太多了。
class 需要使用 v-bind 做数据绑定 :class绑定。

class 第一种

判断是否显示样式

:class="{ activeTohide: isHide == false }"

activeTohide 是css 样式

.activeTohide {
  display: none;
}

用处：有时候，我是为了代替 v-if 或者简单样式切换 做 风琴效果

点击切换

    <div class="statistics-top-box">
           <el-row>
             <el-col :span="3">
                <div :class="{ active: isActive == '1' }" @click="SelectTime(1)">总</div>
             </el-col>
             <el-col :span="4">
                <div :class="{ active: isActive == '2' }" @click="SelectTime(2)">本周</div>
             </el-col>
             <el-col :span="16">
                <div :class="{ active: isActive == '3' }" @click="SelectTime(3)">本月</div>
            </el-col>
      </el-row>
   </div>

class 第二种

三目运算 ：用于对一个div或者标签 样式选择

      <div  :class="this.isActive ? 'coler' : 'errorCls'" >
      </div>

其中 coler 和 errorCls 是 是css 样式

.errorCls{
  display:none;
}
.coler {
  z-index:999;
  width: 30px;
  height: 125px;
  position: absolute;
  bottom: 5px;
  right: 2px;
  font-size: 15px;
  display: flex;
  flex-direction: column;
}

如果 css 代码涉及到定位
一般情况： 我会做一个延时 setTimeout 延时0.35显示；存在提前显示异常问题，有没有博主知道怎么处理

<--- 
    this.isActive=false
    setTimeout(()=>{this.isActive=true},350)

style 绑定

语法 :style="{css属性: 值}"
一般情况； 用于样式就一个，或者要指定改变 某一值

:style="{'color' : (scope.row.hasWrong ? 'red':'#000')}"
:style="{ height: this.divHeight - 36 + 'px' }"

其中 heigh 为高度 属性

还是小白 工作时；
用于高度 项目问题 ： 当时 Cesium 刚开始用 不会， 在 布局 main 里面 放了 Cesium 做的模型地图 放大浏览器/拉伸高度 地图 高度 无限的大
最后： 获取左侧 mainleft 高度 直接给到 中间 main 代码 虑

<--- 左侧 `mainleft` --->
      <div ref="mainleft" class="mainleft"> </div>
<--- 中间 `main` ---> 
      <div  v-loading="maploading" element-loading-spinner="el-icon-loading" :element-loading-background="this.loadingBackground" ref="mainMiddle" class="mainMiddle height-calc zindex" :style="{ height: divHeight + 'px' }">
          <pvmap ref="videoViews" @send="acpectsend" :divHeight="divHeight" :uavSn="defaultUavSn" :selectSn="selectSn" :uavs="uavs" :mapUrl="mapUrl" style="width:100%; height:100%">
          </pvmap>
      </div>

 mounted() {
    window.addEventListener('resize', this.handleResize);
    this.handleResize()
    this.init();
  },
  beforeDestroy() {
    this.closeWebSocket();
    this.stopTimer();
    this.stopTrtc();
    window.removeEventListener('resize', this.handleResize);
  },
  
 methods: {
  handleResize() {
      if (this.resizeTimer) {
        clearTimeout(this.resizeTimer);
      }
      this.resizeTimer = setTimeout(() => {
        const divElement = this.$refs.mainleft;
        const height = divElement.clientHeight;
        // const mainMiddleElement=this.$refs.mainMiddle;
        this.divHeight = height - 2;
        console.log('Div height:', height);
      }, 290); // 节流延迟时间，单位为毫秒
    },
 }

函数

<div :style="{ fontSize: computedFontSize }"></div>

绑定计算属性

computed: {
  computedFontSize: function () {
    return this.fontSize + 'px';
  }
}
//
changeFontSize(fontSize ){
    return fontSize + 'px';
  }

<div :style="rowClass"></div>

触发函数

 // 勾选的行改变颜色
    rowClass({ row, rowIndex }) {
      if (this.GroupIdchoose == row.groupId) {
        return {
          border: "solid 1px #3dffef",
          "background-color": "rgba(185, 221, 249, 0.75)",
        };
      }
    },

数组语法

绑定style样式–数组写法

<!-- 绑定style样式--数组写法 -->
    <div class="basic" :style="styleArr">{{name}}</div>

data 里面
 styleArr: [{
          fontSize: '40px',
          color: 'blue',
        },
        {
          backgroundColor: 'gray'
        }
      ]

绑定class样式 – 数组写法

<div :class="[ 'red', 'bold' ]"></div>
<--- css --->
.red {
  color: red;
}
.bold {
  font-weight: bold;

例子 ：

<div :class="[ isRed ? 'red' : '', isBold ? 'bold' : '' ]">这是一个示例文本</div>
<--- css --->
data() {
  return {
    isRed: true,
    isBold: false
  }
},

例子等效

  <div :class="'route_item plusInborder cursorStyle' + (currentIndex === index ? ' redText' : '')" v-for="(item,index) in tasksRoutes.slice((currentPage-1)*pagesize,currentPage*pagesize)" :key="index">
                                        <span>{{time(item.kmzUpdateTime)}}</span>
                                        <span>{{item.kmzName}}</span>
                                    </div>
<!-- :class="{ 'redText': currentIndex === index }" class="route_item plusInborder cursorStyle "  -->

 <div style="text-align: center;" :class="{ cursorStyle:true, active: isActive == '3' }" @click="SelectTime(3)">本月</div>
  <div style="text-align: center;" :class="'cursorStyle' + (isActive == '2' ? 'active' :'') " @click="SelectTime(2)">本周</div>