vue 动态绑定class 和 style 最常用几种方式

Love The Way You Lie 2022-11-04 05:25 150阅读 0赞

**1、对象绑定单个 class**

<div :class="{'active':isActive}"></div>
    
    data() { 
        return { 
          isActive: true
        };
      }

结果渲染为

**2、对象绑定多个class，需要逗号隔开就行，这里的 active-three 需要用双引号**

<div class="activeOne" v-bind:class="{ activeTwo: isActive, 'active-three': hasError }"></div>
    
    data() { 
    	return { 
    		isActive: true,
    		hasError: true
    	};
    }

结果渲染为

**3、数组绑定**

<div :class="[activeClass, errorClass]"></div>
    
    data() { 
    	return { 
    		activeClass: "active",
    		errorClass: "disActive"
    	};
    },

结果渲染为

**4、数组与三元运算符结合判断选择需要的 class**

<div :class="[isActive?'active':'disActive']"></div>
    
    data() { 
    	return { 
    		isActive: false
    	};
    },

结果渲染为

**5、与三元运算符结合判断选择需要的 class**

<div :class=":class="choiceList == index ?'choice':''""></div>
    
    data() { 
    	return { 
    		choiceList : index 
    	};
    },

结果渲染为

**6、绑定内联样式 对象语法 style**

<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
    
    data: { 
      activeColor: 'red',
      fontSize: 30
    }

直接绑定到一个样式对象通常更好，这会让模板更清晰：

<div :style="styleObject"></div>
    
    data: { 
      styleObject: { 
        color: 'red',
        fontSize: '13px'
      }
    }

**7、绑定内联样式 数组语法 style**

<div :style="[baseStyles, overridingStyles]"></div>
    
    // 数组语法可以将多个样式对象应用到同一个元素上

**8、绑定内联样式 多重值 style**

<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>
    
    //这样写只会渲染数组中最后一个被浏览器支持的值。在本例中，如果浏览器支持不带浏览器前缀的 flexbox，
    // 那么就只会渲染 display: flex。