vue：动态绑定style或class

一、需求介绍

当我们需要根据条件去动态绑定class、style的时候，我们可以有如下方法：

二、实现代码举例

// 绑定一个，条件为true
<div
   class="template-content-parent"
   :class="{ curryChecked: t.id === radioChecked }"
>     
</div>

// 绑定多个，多个条件
<div
   class="step-item"
   :class="{
     finish: s.index < active,
     curryStep: s.index === active,
     allfinish: isAllFinish,
   }"
>
</div>

// 数组、条件表达式、对象
<div
    :class="[
      calcRadioSize && !isCustomStyle ? 'm-radio--' + calcRadioSize : '',
      isCustomStyle ? 'm-radio--custom' : '',
      { 'm-radio--is-checked': calcIsChecked },
      { 'm-radio--is-disabled': calcIsDisabled }
    ]"
    :style="calcIsCustomStyle"
  >
</div>

// 三目运算
<div 
    class="todo-list__wrap__item" 
    @click="onNavTabChange(1)" 
    :style="{color: (tabIndex !== 0 || showTabList && tabNavIndex === 1) ? '#0052D9' : ''}">
全部状态
    <span 
    :class="(tabIndex !== 0 || showTabList && tabNavIndex === 1) ? 'triangleActive' :'triangle'"></span>
</div>

 

// style：对象、模板字符串
<div
  v-if="isShowImgs"
  class="admin-info-header__img"
  :style="{ padding: `0 ${calcImgBoxPaddingX}` }"
>
</div>

<div class="system-icon-basics" :style="bagColor(item)">
  <m-iconfont
   :icon="
   (item.appLogo && item.appLogo.trim()) || 'el-icon-setting'
   "
   :size="'38'"
  />
</div>

<div
   :style="{ width: calcWidth(item) }"
>
</div>

<div
  :style="{ color: isTemplate === true ? '' : '#A7B1C7' }"
>
</div>

// 动态设置icon的背景色
    bagColor(item) {
      let bgColoe = {};
      if (item.appName === 'app1') {
        bgColoe = {
          background: '#83E254',
          'box-shadow': '0 5px 12px 0 rgba(82,196,25,0.53)',
        };
      } else if (item.appName === 'app2') {
        bgColoe = {
          background: '#FF6850',
          'box-shadow': '0 5px 12px 0 rgba(255,0,0,0.33)',
        };
      } else if (item.appName === 'app3') {
        bgColoe = {
          background: '#FEB416',
          'box-shadow': '0 5px 12px 0 rgba(254,174,4,0.53)',
        };
      } else {
        bgColoe = {
          background: '#6DA6FF',
          'box-shadow': '0 5px 12px 0 rgba(109,166,255,0.53)',
        };
      }
      return bgColoe;
    },

// 动态设置子系统特殊icon的大小
    specialIcon(item) {
      let styleObj = {};
      if (item.appLogo === 'icon1') {
        styleObj = {
          'line-height': '60px',
          'font-size': '136px',
        };
      }
      if (item.appLogo === 'icon2') {
        styleObj = {
          'line-height': '60px',
          'font-size': '60px',
        };
      }
      return styleObj;
    },

// 通过调用方法（绑定函数）、准确设置size
calcSize(item) {
   let size = '38';
   if (item.appLogo === 'icon1') {
      size = '136';
   } else if (item.appLogo === 'icon2') {
      size = '60';
   }
   if (item.appLogo === 'icon3') {
      size = '60';
   }
   return size;
},

// :style="calcSaveTemplateStyle" 小程序--这里如果加了()，就会报错
<button
   v-if="!isView"
   class="buttons saveTemplate"
   :style="calcSaveTemplateStyle"
   @tap="medicQuality"
>
// 小程序 mpvue :style写成方法不生效，逻辑都写这里了
<div
  class="list_item"
  v-for="(item, index) in formItem.formCon"
  :key="index"
  :style="{
    border: (item.info_value === 'productLine' && fromData.authProductType !== 1) ? 'none' : '' ||
            (item.info_value === 'productClassify' && fromData.authProductType !== 2) ? 'none' : '' ||
            (item.info_value === 'channelOwnershipCompanyName') ? 'none' : ''
  }"
>

三、欢迎交流指正

四、参考连接

官方文档-Class 与 Style 绑定 — Vue.js

Class 与 Style 绑定 — Vue.js (vuejs.org)