vue动态绑定多个样式

在Vue中，可以使用对象语法来动态绑定多个样式。具体的做法是将一个对象作为样式属性的值，对象中的属性名对应样式属性名，属性值对应样式属性值，如下所示：

<template>
  <div :style="styles"></div>
</template>

<script>
export default {
  data() {
    return {
      styles: {
        color: 'red',
        fontSize: '16px',
        fontWeight: 'bold'
      }
    }
  }
}
</script>

在上述代码中，`styles` 对象包含了三个属性，分别对应 `color`、`fontSize` 和 `fontWeight` 这三个样式属性。这些属性的值可以根据需要进行修改，从而实现动态绑定多个样式。

如果需要添加或删除某个样式属性，可以使用 `v-bind:class` 指令来实现。例如，可以在 `styles` 对象中添加一个 `backgroundColor` 属性，然后使用 `v-bind:class` 指令来根据条件动态添加或删除这个属性，如下所示：

<template>
  <div :style="{ ...styles, ...bgStyles }"></div>
</template>

<script>
export default {
  data() {
    return {
      styles: {
        color: 'red',
        fontSize: '16px',
        fontWeight: 'bold'
      },
      bgStyles: {}
    }
  },
  methods: {
    toggleBgColor() {
      this.bgStyles = this.bgStyles.backgroundColor ? {} : { backgroundColor: 'blue' }
    }
  }
}
</script>

在上述代码中，`bgStyles` 对象默认为空，当调用 `toggleBgColor` 方法时，会根据当前 `bgStyles` 对象中是否包含 `backgroundColor` 属性来动态添加或删除这个属性。然后在模板中使用对象合并语法将 `styles` 和 `bgStyles` 对象合并起来，从而实现动态绑定多个样式。