vue動態(tài)類名及動態(tài)樣式設置方式:class/:style

更新時間：2022年05月25日 10:33:46 作者：·半傻半呆半瘋癲

文章主要介紹了在Vue中設置動態(tài)類名（:class）和動態(tài)樣式（:style）的方法,動態(tài)類名方面,使用三元表達式、結合過濾器和計算屬性等方法進行設置,動態(tài)樣式方面,介紹了基礎用法、結合計算屬性和三元表達式進行設置等方法

Vue動態(tài)類名（:class）、動態(tài)樣式(:style) 的設置

以下是個人在項目中使用過的關于在Vue中的動態(tài)類名和動態(tài)樣式的設置方法的整理記錄

動態(tài)類名（:class）的一些用法

三元表達式判斷

: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']"

涉及太多的需求的，結合過濾器（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 {}

單獨組件中

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

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

常用于公共組件中的（下面是一個示例）

<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>

動態(tài)樣式(:style)的一些用法

基礎用法

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

結合計算屬性一起使用

:style="{
      opacity,
    }"

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

三元表達式

: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'"

動態(tài)配置背景顏色、背景圖片

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