vuejs如何自定義屬性

在vuejs中，可以利用“v-bind”指令來自定義屬性，該指令主要用于屬性綁定，語法“v-bind:自定義屬性名="屬性值"”；也可使用“v-bind”指令的簡寫方式“:屬性名="屬性值"”來自定義屬性。

本教程操作環(huán)境：windows7系統(tǒng)、vue2.9.6版，DELL G3電腦。

Vuejs如何給元素添加自定義屬性

有這樣一個場景：v-for渲染一個列表有10個子項，并且把第5個子項后的元素都添加一個屬性data-wow-delay='0.8s'，實現(xiàn)如下：

...<ul>     <li v-for='(item,index) in [1,2,3,4,5,6,7,8,9,10]'          :data-wow-delay="index>5?'0.8s':''">{{item}}</li></ul>...

可以得出一個給元素添加自定義屬性的方法

<el v-bind:自定義屬性名="Boolean?'value1':'value2'"></el>

當然，如果只是添加一個常見屬性(css屬性)，例如class,style等，下面這種方法也可以。

<el v-bind:class="{'aniamted':showAnimated}"></el>

說明：v-bind指令

v-bind 主要用于屬性綁定，Vue官方提供了一個簡寫方式 :bind，例如：

<!-- 完整語法 --> v-bind:屬性名="值" <!-- 縮寫 --> :屬性名="值"