vue、uniapp中动态添加绑定style、class 9种方法实现

在Vue和uni-app中，可以通过以下9种方式动态添加绑定的style和class。

1. 使用数组的语法绑定多个样式对象。
2. 使用对象语法直接绑定到对象。
3. 使用数组的语法绑定多个类名。
4. 使用三元表达式切换类。
5. 使用对象语法绑定类。
6. 使用数组的语法绑定多个样式。
7. 使用数据属性绑定样式。
8. 使用计算属性绑定样式。
9. 使用方法返回样式字符串。

以下是每种方法的示例代码：

<template>
  <view>
    <!-- 方法1 -->
    <view :style="[styleObject1, styleObject2]"></view>
 
    <!-- 方法2 -->
    <view :style="{ color: active ? 'red' : 'green' }"></view>
 
    <!-- 方法3 -->
    <view :class="[isActive ? 'active' : '', 'static']"></view>
 
    <!-- 方法4 -->
    <view :class="[isActive ? 'active' : 'inactive']"></view>
 
    <!-- 方法5 -->
    <view :class="{ active: isActive, 'text-success': hasSuccess }"></view>
 
    <!-- 方法6 -->
    <view :style="[baseStyles, overridingStyles]"></view>
 
    <!-- 方法7 -->
    <view :style="{ fontSize: fontSize + 'px' }"></view>
 
    <!-- 方法8 -->
    <view :style="computedStyle"></view>
 
    <!-- 方法9 -->
    <view :style="styleMethod"></view>
  </view>
</template>
 
<script>
export default {
  data() {
    return {
      active: true,
      isActive: true,
      hasSuccess: true,
      fontSize: 16,
      styleObject1: {
        color: 'red',
        fontSize: '14px'
      },
      styleObject2: {
        backgroundColor: 'blue'
      },
      baseStyles: {
        color: 'red',
        fontSize: '14px'
      },
      overridingStyles: {
        backgroundColor: 'blue'
      }
    };
  },
  computed: {
    computedStyle() {
      return {
        color: this.active ? 'red' : 'green',
        fontSize: '16px'
      };
    }
  },
  methods: {
    styleMethod() {
      return 'color: ' + (this.active ? 'red' : 'green') + '; font-size: 16px;';
    }
  }
};
</script>
 
<style>
.active {
  color: green;
}
.static {
  background-color: yellow;
}
.inactive {
  color: red;
}
.text-success {
  color: green;
}
</style>

在这个例子中，我们定义了一个组件，它使用了不同的方法来动态绑定样式和类。这些方法涵盖了常用的场景，包括条件渲染类名和样式，以及使用计算属性和数据属性。