vue中的动态类名及动态样式设置 :class / :style

Vue中的动态类名（:class）、动态样式(:style) 的设置

以下是个人在项目中使用过的关于在Vue中的动态类名和动态样式的设置方法的整理记录，如果有更好的方法也欢迎各位大佬留言添加 ε≡٩(๑>₃<)۶ 一心向学

动态类名（:class）的一些用法

1. 三元表达式判断

:class="address.length > 0 ? 'city' : 'city-gray'"

:class="{ 'is-active': form.avatar == i }"

:class="[
      sizeClass ? 'el-warning--' + sizeClass : '',
      {
        'is-no-spacing': this.noSpacingClass,
      },
    ]"
 
:class="[flexLeft ? 'expand-left' : 'expand-middle']"

2. 涉及太多的需求的，结合过滤器（filters）使用

// template中
<div :class="item.gameList | colStyle" v-if="item.gameList.length > 0" class="game-list">
// script中
filters: {
    colStyle(data) {
      if (_.isEmpty(data)) {
        return '';
      }
      const { length } = data;
      let className = '';
      if (length === 1) {
        className = 'two-col';
      }
      if (length === 2) {
        className = 'two-col';
      }
      if (length === 3) {
        className = 'three-col';
      }
      if (length >= 4) {
        className = 'four-col';
      }
      return className;
    },
  },
  // style中
  .two-col {}
  .three-col {}

3. 单独组件中

HTML中
:class="[`startTheme-${themeConfig.label}`]"

Style中
.startTheme-green { color: green; }
.startTheme-red { color: red; }

4. 常用于公共组件中的（下面是一个示例）

<template>
  <div
    :class="{
      'disabled-view': disabled,
      [`button-${this.type}-view`]: type,
      [`button-${this.size}`]: size,
    }"
    @click="onClick"
    @keydown.enter="onClick"
    class="seek-top-button-view"
  >
    <Loading v-if="hasLoading" class="loading-view" type="spinner" />
    <slot />
  </div>
</template>

<script>
import { Loading } from 'vant';

export default {
  name: 'StButton',
  components: {
    Loading,
  },
  directives: {
    focus: {
      inserted(el) {
        el.focus();
      },
    },
  },
  props: {
    color: {
      type: String,
      default: '',
    },
    size: {
      type: String,
      default: 'large', // large/small
    },
    loading: {
      type: Boolean,
      default: false,
    },
    shadow: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    type: {
      type: String,
      default: 'primary', // primary / text /default/danger
    },
  },
  data() {
    return {};
  },
  computed: {
    opacity() {
      if (this.loading) return 0.69;
      return 1;
    },
    hasLoading() {
      return this.loading && this.type !== 'text';
    },
  },
  methods: {
    onClick(event) {
      if (this.loading || this.disabled) return;
      this.$emit('click', event);
    },
  },
};
</script>

<style lang="scss" scoped>
// 这里只展示部分作为参考
&.button-default-view {
    //白色按钮
    background: $--color-white;
    color: $--color-red;
  }
  &.button-danger-view {
    //字体边框红色
    border: 1px solid $--color-red;
    color: $--color-red;
    background: transparent;
  }
  </style>

动态样式(:style)的一些用法

1. 基础用法

:style="{
      width: itemWidth + 'px',
      height: itemHeight + 'px',
      left: left + 'px',
      top: top + 'px',
    }"

2. 结合计算属性一起使用

:style="{
      opacity,
    }"

computed: {
      opacity() {
          if (this.loading) return 0.69;
          return 1;
      },
},

3. 三元表达式

:style="{ 'padding-top': search ? '44px' : '' }"

:style="$parent.value === id ? activeStyle : {}"
computed: {
    activeStyle() {
      return {
        color: this.$parent.activeColor,
      };
    },
},

:style="'background: url(' + require(`./img/bgCheck_${tabCheck === index ? 1 : 0}.png`) +')no-repeat'"

4. 动态配置背景颜色、背景图片

<div
      class="main__header"
      :style="
        'background: ' +
        `${themeConfig.themeColor}` +
        ' url(' +
        require(`@/assets/themeCofing/${themeConfig.label}/personalInfo/header_bg.png`) +
        ')no-repeat center / contain;'
      "
   />

以上仅供大家参考

:ஐ٩(๑´ᵕ`)۶ஐ: 学习使我进步