vuejs で属性をカスタマイズする方法

vuejs では、「v-bind」命令を使用して属性をカスタマイズできます。この命令は主に属性のバインドに使用されます。構文は「v-bind:カスタム属性名="属性値"」です。 「v-bind」コマンドの省略形「:property name="property value"」を使用してプロパティをカスタマイズすることもできます。

このチュートリアルの動作環境: Windows7 システム、vue2.9.6 バージョン、DELL G3 コンピューター。

Vuejs が要素にカスタム属性を追加する方法

次のようなシナリオがあります。 v-for は 10 個のサブ項目を含むリストをレンダリングし、属性の追加データを配置します。 -wow-lay='0.8s' を各要素に追加し、実装は次のとおりです。

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

要素にカスタム属性を追加するメソッドを取得できます

<el v-bind:自定义属性名="Boolean?&#39;value1&#39;:&#39;value2&#39;"></el>

もちろん、 classやstyleなどの共通属性（css属性）を追加するだけで、以下の方法も使えます。

<el v-bind:class="{&#39;aniamted&#39;:showAnimated}"></el>

説明: v-bind 命令

v-bind は主に属性バインディングに使用されます。Vue は公式に略語を提供しています: バインド (例:

<!-- 完整语法 -->
v-bind:属性名="值"
<!-- 缩写 -->
:属性名="值"

)

関連する推奨事項: 「vue.js チュートリアル 」

以上がvuejs で属性をカスタマイズする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。