vue动态绑定class、style的几种方法

动态绑定class的几种方法：

1.对象语法：使用对象语法可以根据条件给元素添加或移除一个或多个 class。例如，你可以根据属性 isRed 的值来决定是否添加类名 red：

<div :class="{ red: isRed }"></div>

2.数组语法：使用数组语法可以一次指定多个 class，这些 class 都会被添加到元素中。例如，下面的代码会将类名 red 和 bold 添加到元素中：

<div :class="[ 'red', 'bold' ]"></div>

3.绑定一个计算属性：使用计算属性可以在模板中动态计算出 class 名称。例如，假设根据 isActive 属性来决定是否添加类名 active：

<div :class="computedClass"></div>

computed: {
    
    
  computedClass: function () {
    
    
    return this.isActive ? 'active' : '';
  }
}

4.使用一个数组和对象的混合语法：使用数组和对象的混合语法可以按照一定的逻辑动态地为元素绑定 class。例如，可以根据属性 isActive 的值来为元素动态绑定 class：

<div :class="[isActive ? 'active' : '', { bold: isBold }]"></div>

动态绑定style的几种方法：

1.对象语法：使用对象语法可以根据条件动态绑定一个或多个样式。例如，你可以根据属性 isRed 的值来决定是否添加 color: red 样式：

<div :style="{ color: isRed ? 'red' : '' }"></div>

2.数组语法：使用数组语法可以一次指定多个样式，这些样式都会应用到元素中。例如，下面的代码会将 color: red 和 font-size: 20px 样式应用到元素中：

<div :style="[ { color: 'red' }, { 'font-size': '20px' } ]"></div>

3.绑定一个计算属性：使用计算属性可以在模板中动态计算出样式。例如，假设根据 fontSize 属性来设置元素的字体大小：

<div :style="{ fontSize: computedFontSize }"></div>

computed: {
    
    
  computedFontSize: function () {
    
    
    return this.fontSize + 'px';
  }
}

4.直接绑定一个样式对象：如果你想同时绑定多个样式并且这些样式都是固定的，那么你可以直接在模板中绑定一个样式对象。例如，下面的代码会将 color: red 和 background-color: blue 样式应用到元素中：

<div :style="{'color': 'red', 'background-color': 'blue'}"></div>