【实战中经常用到】vue中动态样式style和class总结

动态样式style

//第1种：三元运算形式
<div : :style="{ width: displayType === 1 ? '300px' : '' }"></div>

//第2种:style的直接使用

  <a href="java:;" style="color: white;background:yellow">{{item.name}}</a>

//第3种:单个属性

<a href="java:;" :style="{color:selColor}">{{item.name}}</a>

data(){
      return {
        selColor:'white',
      }
    }


//第4种：驼峰写法
 <a href="java:;" :style="{'text-align':textAlign,fontSize: fontSize + 'px'}">{{item.name}}</a>

data(){
      return {
       textAlign: 'center',
      fontSize: 18,
      }
    }

'text-align' 或 fontSize//这里用引号也可用驼峰式也可

//第5种:对象形式
<a href="java:;" :style="styleObj">{{item.name}}</a>

data () {
    return {
       styleObj:{
             display: 'inline-block',
            'text-align': 'center',//这里用引号也可用驼峰式
            background: 'red',
            fontSize: '14px',//这里用引号也可用驼峰式
            color: 'gold',
      },
  }
}

动态class样式

<template>
  <div class="home">
    <!-- 写法一：对象形式，用于指定单个样式是否切换-->
    <!-- <div :class="{select:num>=10}">动态样式切换</div> -->
    <!-- 写法二：用于指定多个样式切换 -->
    <!-- <div :class="[num>=10?'select':'noselect']" >动态样式切换</div> -->
    <!-- 写法三：复杂化的写法 -->
    <!-- <div :class="{select:arr.filter(item=>item).length>5}">动态样式切换</div> -->
    <!-- <div :class="[arr.find(item=>item===4)?'select':'noselect']" >动态样式切换</div> -->
    <div>动态样式切换</div>
    <div>{{num}}<button @click="num++">+</button><button @click="num--">-</button></div>
  <h3>实现当num大于10时头部问题变成红色</h3>
  
  </div>
</template>

//对象方式：动态绑定类名key,类名过多，值可以通过定义变量或使用computed属性，
 <div :class="classObj" class="app-wrapper"></div>

//方式1：定义变量方式
data() {
return {
   classObj：{
       hideSidebar: false,
        openSidebar:true,
        mobile: 'mobile'
}
  }
},


//方式2：计算属性computed方式
data() {
return {
   sidebar.opened:true,
   device :''
  }
},
//或在vuex中取变量值
 ...mapState({
      sidebar: state => state.app.sidebar,
      device: state => state.app.device,
      showSettings: state => state.settings.showSettings,
      fixedHeader: state => state.settings.fixedHeader
    }),
computed: {
   classObj() {
        return {
        hideSidebar: !this.sidebar.opened,
        openSidebar: this.sidebar.opened,
        mobile: this.device === 'mobile'
      }

<style lang="scss" scoped>
  @import "~@/styles/mixin.scss";
  @import "~@/styles/variables.scss";
.app-wrapper {
    @include clearfix;
    position: relative;
    height: 100%;
    width: 100%;

    &.mobile.openSidebar {
      position: fixed;
      top: 0;
    }
  }

  .hideSidebar .fixed-header {
    width: calc(100% - 54px)
  }
</style>