vue动态增加style

你可以使用Vue的动态绑定语法来动态增加样式。在Vue中，你可以使用v-bind指令将一个表达式和一个属性关联起来，实现动态绑定。对于样式，你可以使用v-bind:style指令来绑定一个包含CSS属性和值的对象。

下面是一个示例，演示如何在Vue中动态增加样式：

<template>
  <div :style="dynamicStyles">示例</div>
</template>

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

在上面的示例中，我们使用`:style`指令将`dynamicStyles`对象与`div`元素的样式绑定。`dynamicStyles`对象定义了CSS属性和值的键值对，这些样式将应用于`div`元素。

如果你想动态改变样式，只需修改`dynamicStyles`对象的属性即可。例如，你可以在Vue组件的方法中更新样式对象：

<template>
  <div :style="dynamicStyles">示例</div>
  <button @click="updateStyles">更新样式</button>
</template>

<script>
export default {
  data() {
    return {
      dynamicStyles: {
        color: 'red',
        fontSize: '16px'
      }
    };
  },
  methods: {
    updateStyles() {
      this.dynamicStyles.color = 'blue';
      this.dynamicStyles.fontSize = '20px';
    }
  }
};
</script>

上面的示例中，点击按钮会调用`updateStyles`方法，更新`dynamicStyles`对象的属性值，从而动态改变样式。

通过这种方式，你可以根据需要动态增加和修改Vue组件的样式。