Vue學習筆記:v-bind 屬性動態綁定


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的屬性值,如果有特殊符號要加引號
  • 當然也可以寫成駝峰的寫法,都支持

數組語法:

~~~~~ END ~~~~~


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM