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

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

<div :class="func(state)">

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

经过尝试找出了原因：

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

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

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

 

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

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

 

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

<template>

<button :class=change_class(state)><button/>

<template/>

 

<script>

export default {

data:{

return{

state: "class1",

}

}

methods: {
change_class(state){
if(state===0){
return "class1";
}
else{
return "class2"
}

}
}

}

<script/>

 

 

<style scope>

.class1{
  /*background-color: rgba(140,216,224,0.5);*/
  color: #1ACBDC;
  font-size: 15px;
}
.class2{
  background-color: rgba(53,157,198,0.7);
  color: #ffffff;
  font-size: 15px;
}

<style/>