vuejs怎么自定義屬性

這篇文章主要介紹了vuejs怎么自定義屬性，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著(zhù)大家一起了解一下。

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

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

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

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

...<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>

當然，如果只是添加一個(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ě) -->
:屬性名="值"