vue之v-bind動態綁定屬性

1.v-bind的基本使用

在這裏插入圖片描述
v-bind就是用來動態的綁定我們的屬性,一般來說綁定的值都是在我們的vue裏面進行查找。當vue裏面的值進行改變,我們綁定的屬性的值也會進行改變。他的縮寫時:,單純的一個冒號。

2綁定class

在這裏插入圖片描述
v-bind配合v-on同時使用,當我們的點擊按鈕的時候,v-bind綁定的值就會進行取反,這時候我們的屬性就會發生變化,就相當於爲我們的標題添加了一個class屬性。結果如下:
在這裏插入圖片描述在這裏插入圖片描述
還有就是我們的v-bind也可以用數組語法動態綁定我們的class屬性。
在這裏插入圖片描述
最後得到我們的結果的話就是這樣子的,還有就是如果給我們的active加了單引號,那麼我們的結果就是active了,就不是變量了。如果想要得到變量的話,是不能加單引號的。
在這裏插入圖片描述
相當於給我們綁定了多個class

3.動態綁定style對象

在這裏插入圖片描述
v-bind綁定style的話就是:style="{key(屬性名): value(屬性值)}",然後我們再在data中設置我們需要設置的參數,就可以了。和綁定class其實差不多。
在這裏插入圖片描述
這個第二種的話就使用數組的方式來綁定我們的style,具體方式如上圖。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章