vue中的v bind指令

2021-10-09 22:15:25 字數 1059 閱讀 1960

繫結標籤屬性

像div、p、img等等都是標籤,img標籤中的src就是乙個屬性。

未使用v-bind:

使用v-bind:

data:

})

存在簡寫方法,即將v-bind省略,留下冒號:

先列出接下來示例中的所需要的js和樣式:

data: }})

//css樣式

示例1:繫結class屬性

其中classname繫結的是classa樣式,結果顯示的是classa的樣式。

1、繫結class

示例2:給class繫結乙個判斷

此處結合了v-model指令,對isok進行乙個值的改變,通過isok的改變來判斷是否使用classa的樣式。

2、繫結class中的判斷

}

示例3:以陣列的形式繫結class

class屬性中是乙個陣列,同時在data中宣告classa,classb,會同時顯示classa和classb的樣式。

3、以陣列的形式繫結class

示例4:通過三元運算子繫結class

類似於上面的繫結乙個判斷,不過是通過istrue這個媒介,利用三元運算子來決定顯示的是哪個樣式。

4、通過三元運算子繫結class

}

示例5:繫結style

寫法與內聯css樣式類似,但是需要申明red和font。

注意:在vue中,不支援font-size的寫法,支援fontsize。

5、繫結style

示例6:通過物件繫結style

styleobject宣告為乙個物件。

6、以物件形式繫結style

Vue系列 四 之常用指令v bind

自定義元件prop 為了避免篇幅過長,常用指令我可能會分幾個篇幅來介紹。v bind api 縮寫 v bind指令主要是繫結元素的屬性 比如的src,元素的class,style,id等 和自定義元件 後面會講到 的prop。來看幾個常見的使用場景 path div var vm newvue m...

一起學vue指令之v bind

一起學vue指令 v bind 網頁的url位址並不是固定寫死的,如果寫死,每乙個活動就改一次的url,乙個網頁有多少張,工作量多大?通常來說,客戶端向伺服器傳送請求,伺服器返回url資料到vue例項的data資料中,由於url動態繫結了vue例項的data,所以會實時更新.無需我們手工更改,並且不...

Vue中v bind與v model的區別

簡單來說,區別如下 1.v bind用來繫結資料和屬性以及表示式,縮寫為 2.v model使用在表單中,實現雙向資料繫結的,在表單元素外使用不起作用 v model多在表單中使用,在表單元素上建立雙向繫結,根據控制項型別選擇正確的方法更新元素,可以繫結text radio checkbox sel...