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/>