快捷導(dǎo)航

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

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

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

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

以下是個(gè)人在項(xiàng)目中使用過的關(guān)于在Vue中的動(dòng)態(tài)類名和動(dòng)態(tài)樣式的設(shè)置方法的整理記錄

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

三元表達(dá)式判斷

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

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

單獨(dú)組件中

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

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

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

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

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

基礎(chǔ)用法

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

結(jié)合計(jì)算屬性一起使用

:style="{
      opacity,
    }"

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

三元表達(dá)式

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

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

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