vue - 使用:class指令 动态设置标签class样式的方法注意点 1

最近在做小项目，涉及到了样式的动态变化，所有就想到了v-bind:class这个指令，但是按照原本的方式：

这样写；在开发环境下生效，但是打包发布之后就不生效了。

经过尝试找出了原因：

1、:class 指令支持接收字符串'example'这种形式；

2、也接受:class="v1"；v1为data里的组件变量；可在任意触发事件中修改v1的值；

3、用方法1扩展一下，将class字符串作为事件返回值。但是这个方法存在一个小问题，返回的值是一个字符串。请注意，返回的是一个字符串。

 

1和2方法的不同点在于：1方法的事件是标签本身出发的，2方法是其他事件触发的。

方法3就是实现标签的自发触发事件来修改class样式类。

 

下面给一个正确使用方法示例：