最近一直在做vue項目 從網上搜索到的資料不太多。關於:class的使用 結合自己的實現 整理如下。接下來一篇寫:style 。其實從:class 這裏可以想到:style的使用 也是類似的
一 class
1 自定義class 通過vue computed 計算屬性 實現 我的class 是名稱+時間戳,是獨一份的,可以作爲id角色使用。
html:
<div :class="_module"></div>
data(){
return {
arr:{
m_class:"",
hasClass:false
}
}
},
computed:{
_module:{
get: function () {
if(this.arr.hasClass){
return this.arr.m_class
}else{
return this.arr.m_class="module_"+(new Date().getTime())
}
}
}
}
2 以三元表達式來表示class
如果存在titleSrc 就添加bgImgSet,如果不存在就沒有這個class
html:
<div :class="ind.titleSrc?'bgImgSet':''"></div>
data(){
return {
ind:{
titleSrc:""
}
}
}
3 如果存在兩個動態class 可以如下這樣寫 注意標籤上不能寫兩個:class
1 2 |
|
用[]數組的形式
這裏面_module 是我用1方法生成的,需要給我項目每個模塊的div添加上的class;takePlace 是佔位的class 只有特定的模塊能添加,關於兩個動態class如何添加,最後想出 以數組的方式 可以實現。 代碼如上