VUE2 动态 style

在 Vue 2 中，你可以使用动态绑定样式的方式来实现动态样式。你可以通过v-bind或简写的冒号语法来动态绑定一个对象，该对象包含你要应用的样式属性及其对应的值。

下面是一个示例：

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

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

上面的代码中，我们使用了`:style`指令来绑定一个 `dynamicStyles` 对象作为样式。这个对象中的属性名是CSS属性，值是对应的样式值。你可以根据你的需求动态修改`dynamicStyles`对象中的属性值，从而动态改变元素的样式。

如果你需要根据条件来动态改变样式，你可以在`computed`属性中定义一个方法，根据条件返回不同的样式对象。

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

<script>
export default {
  data() {
    return {
      isActive: true
    };
  },
  computed: {
    dynamicStyles() {
      return this.isActive ? { backgroundColor: 'red' } : { backgroundColor: 'blue' };
    }
  }
};
</script>

在上面的例子中，根据`isActive`的值不同，我们返回不同的样式对象，从而实现了动态样式绑定。

希望对你有所帮助！如有其他问题，请随时提问。