在vuejs中，可以利用“v-bind”指令來(lái)自定義屬性，該指令主要用于屬性綁定，語(yǔ)法“v-bind:自定義屬性名="屬性值"”；也可使用“v-bind”指令的簡(jiǎn)寫(xiě)方式“:屬性名="屬性值"”來(lái)自定義屬性。

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

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

有這樣一個(gè)場(chǎng)景：v-for渲染一個(gè)列表有10個(gè)子項(xiàng)，并且把第5個(gè)子項(xiàng)后的元素都添加一個(gè)屬性data-wow-delay='0.8s'，實(shí)現(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>...

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

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

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

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

說(shuō)明：v-bind指令

v-bind 主要用于屬性綁定，Vue官方提供了一個(gè)簡(jiǎn)寫(xiě)方式 :bind，例如：

<!-- 完整語(yǔ)法 --> v-bind:屬性名="值" <!-- 縮寫(xiě) --> :屬性名="值"