vue中class名為變數的幾種寫法

2021-10-07 06:09:22 字數 1475 閱讀 8065

1、class名只有乙個，只不過是變數



class


="classname"


>


<


/div>


<


/template>


export


default}}


<


/script>
2、通過物件形式

此種方式適合針對固定的class名，判斷是否存在此class名稱



class=""


>


<


/div>


<


/template>


export


default}}


<


/script>
3、通過陣列

陣列形式可以放變數、固定有的以及需要判斷的class名



class


="[show ? 'showme' : '' , 'stay', classname2]"


>


<


/div>


<


/template>


export


default}}


<


/script>
4、element的select或者類似這個的一些下拉框的class

element的select一類元件都是封裝過的，可以通過popper-class給下拉框乙個class，這種需要注意的是，不能使用物件或者陣列形式的class方式，只接收字串，這時class名中存在變數時，可以直接通過字串拼接的形式

需要注意如果此種形式時用到了三目運算子的話，給它乙個括號，不然可能會出現一些問題



:popper-


class


="'stay' + 『 』 + (show ? 'showme' : '') + ' ' + classname2"


>


<


/div>


<


/template>


export


default}}


<


/script>
5、利用js增加或刪除class

利用classlist的add和remove方法可以方便的對dom的class列表增加或者減少

document.


getelementbyid()


.classlist.


add(


)// 增加


document.


getelementbyid()


.classlist.


remove()


// 刪除

vue中class的用法

最近學習了vue中class和class的用法，想來總結一下，也把我的知識提供給大家使用 首先來總結class的用法，vue中的class有4種寫法 class和style都屬於dom屬性，所以在vue中都用 class和 style表示 想給id為box的元素加上這些樣式 方法一 涼涼三生三世，為...

Vue中Class與Style繫結

操作元素的class列表和內聯樣式是資料繫結的乙個常見需求。因為它們都是屬性，所以我們可以使用v bind處理它們 只需要通過表示式計算出字串結果即可。不過拼接字串比較麻煩，因此在v bind用於class和style時，vue做了專門的增強，表示式結果的型別除了字串之外，還可以是物件和陣列。1 物...

vue中class和style的動態繫結

1 物件語法我沒樣式！hahha！export default 繫結乙個返回物件的計算屬性 data computed 2 陣列語法陣列語法！export default 三元表示式 3 物件陣列的巢狀 1 行內物件 2 動態載入 data 3 陣列語法 v bind style的陣列語法可以將多個...