【uniapp / vue】中动态添加绑定style 或 class

在Vue或uni-app中，你可以使用绑定的style或class来动态添加样式。这些绑定可以基于组件的数据或计算属性。

绑定Class:

<div :class="{ active: isActive, 'text-success': hasSuccess }"></div>

data() {
  return {
    isActive: true,
    hasSuccess: false
  }
}

绑定Style:

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

data() {
  return {
    activeColor: 'red',
    fontSize: 30
  }
}

如果你需要动态添加多个样式对象，可以使用计算属性：

<div :style="styleObject"></div>

data() {
  return {
    isActive: true,
    hasSuccess: false,
    activeColor: 'red',
    fontSize: 30
  }
},
computed: {
  styleObject() {
    return {
      color: this.activeColor,
      fontSize: this.fontSize + 'px',
      'text-decoration': this.isActive ? 'underline' : 'none'
    }
  }
}

这样，你可以根据组件的状态动态更新样式。