v-bind
的作用
v-bind指令可以將節點的屬性與動態表達式綁定在一起
v-bind可以綁定html元素中的各種屬性
例如:
<a v-bind:href="xxx"></a>
xxx可以是data里的變量,也可以是函數等等
語法糖
v-bind
可以簡寫成 :
即 v-bind:xxx
簡寫成 :xxx
class屬性動態綁定
常見的寫法:class可以綁定一個放着類名的數組,也可以綁定一個對象,或者對象也可以放在數組中
對象中,鍵表示類名,值表示這個類是否進行啟用
對象語法、數組語法:
:class="['a', 'b', 'c']"
:class="['a', 'b', {k1:v1, k2:v2}]"
:class="{k1:v1, k2:v2}"
:class="obj"
使用了綁定class之后,仍然可以使用普通class,vue會對用到的類進行合並
v-bind綁定style屬性
對象語法::style="{k1, v1}"
- k1是css的屬性名,v1是css的屬性值,如果有特殊符號要加引號
- 當然也可以寫成駝峰的寫法,都支持
數組語法: