更新時間:2022年08月19日17時31分 來源:傳智教育 瀏覽次數(shù):
在實際開發(fā)中經(jīng)常會遇到動態(tài)操作元素樣式的需求。因此,vue 允許開發(fā)者通過 v-bind 屬性綁定指令,為元素動態(tài)綁定 class 屬性的值和行內(nèi)的 style 樣式。
可以通過三元表達式,動態(tài)的為元素綁定 class 的類名。示例代碼如下:
<h3 class="thin" :class="isItalic?'italic': ">MyDeep組件</h3> <button @click="isItalic=!isItalic">Toggle Italic</button> data() { return { isItalic: true } } .thin{ // 字體變細 font-weight:200; } .italic{ // 傾斜字體 font-style: italic; }
如果元素需要動態(tài)綁定多個 class 的類名,此時可以使用數(shù)組的語法格式:
<h3 class="thin" :class="[isItalic ? 'italic' : '", isDelete ? 'delete' : '"]"> MyDeep 組件 </h3> <button @click="isItalic=!isItalic">Toggle Italic</button> <button @click="isDelete=!isDelete">Toggle Delete</button> data(){ return { isItalic: true, isDelete: false, } }
使用數(shù)組語法動態(tài)綁定 class 會導致模板結(jié)構(gòu)臃腫的問題。此時可以使用對象語法進行簡化:
<h3 class="thin" :class="class0bj">MyDeep 組件</h3> <button @click="class0bj.italic = !class0bj.italic">Toggle Italic</button> <button @click="class0bj.delete = !class0bj.delete">Toggle Delete</button> data(){ return { classobj:{ //對象中,屬性名是class 類名,值是布爾值 italic: true, delete: false, } } }
4. 以對象語法綁定內(nèi)聯(lián)的 style
:style 的對象語法十分直觀——看著非常像 CSS,但其實是一個 JavaScript 對象。CSS property 名可以用駝峰式 (camelCase) 或短橫線分隔 (kebab-case,記得用引號括起來) 來命名:
<div :style="{color: active, fontSize: fsize + 'px','background-color': bgcolor}"> 黑馬程序員 </div> <button @click="fsize += 1">字號 +1</button> <button @click="fsize -= 1">字號 -1</button> data() { return { active: 'red', fsize: 30, bgcolor:'pink', } }