1. 程式人生 > >vue中的class和style的使用

vue中的class和style的使用

style class指令用法

v-bind:class的使用

1:第一種使用方式

v-bind:class='[a,b,c]'形式的用法

a b c是data中的數據

技術分享圖片

2:第二種使用方式

v-bind:class='{}'形式的用法

技術分享圖片

當然也可以配合著數據一起使用

技術分享圖片

3:第三種使用方式(其實和第二種方式是一樣的)

v-bind:class='json',引號裏可以直接存放一個json類型的變量,其實也就是第二種形式的寫法,換了一個地方而已。

技術分享圖片

v-bind:style的使用

1:第一種使用方式

技術分享圖片

2:第二種使用方式(其實就是第一種方法的位置換了一個地方)

技術分享圖片

3:第三種用法

技術分享圖片

vue中的class和style的使用