v-bind:class="classfn"
v-bind:title="titlefn"
v-bind:href="hreffn"
v-bind:target="targetfn"
>}
data:
})
繫結的資料物件不必都定義在模板裡,也可以用乙個大物件包裹起來,例如:isactive為true時,結果為下圖:
isactive為false時,結果為下圖:
上面案例中,類名active依賴於資料isactive。當其值為true時,div擁有該類名active,為false時則沒有
物件包裹形式優點:如果需要新增乙個class時,只需要在變數裡新增屬性,並設定該屬性為true即可,所以相對來說更加自由。案例2:例如下圖:
首先它是陣列,因此第乙個g存在,因此有樣式名fontgreen;
其次,是乙個三元表示式,會判斷r的值,如果為true(或隱式轉換為true),那麼就繪將r的值新增到陣列,否則新增s的值。
當class為多條件時,三元表示式寫法較為繁瑣,可以在陣列裡巢狀物件,使用物件寫法,如下。
當class為多條件時,三元表示式寫法較為繁瑣,可以在陣列裡巢狀物件,使用物件寫法,如下。
VUE之v bind類名與樣式繫結
v bind 語法格式1 單個語法格式 語法格式2 物件語法格式 語法格式3 陣列語法格式 繫結類名 class 物件語法 單類名切換 語法 傳給 v bind class 乙個物件,以動態地切換 class 1 給v bind class設定乙個物件,可以動態切換class。data isacti...
Vue(九) 樣式繫結v bind示例
class 與 style 是 html 元素的屬性,用於設定元素的樣式,我們可以用 v bind 來設定樣式屬性。vue.js v bind 在處理 class 和 style 時,專門增強了它。表示式的結果型別除了字串之外,還可以是物件或陣列。style active active1 style...
Vue系列 四 之常用指令v bind
自定義元件prop 為了避免篇幅過長,常用指令我可能會分幾個篇幅來介紹。v bind api 縮寫 v bind指令主要是繫結元素的屬性 比如的src,元素的class,style,id等 和自定義元件 後面會講到 的prop。來看幾個常見的使用場景 path div var vm newvue m...