Comment personnaliser les attributs dans vuejs

Dans vuejs, vous pouvez utiliser l'instruction « v-bind » pour personnaliser les attributs. Cette instruction est principalement utilisée pour la liaison d'attributs. La syntaxe est « v-bind : nom d'attribut personnalisé = valeur d'attribut » ; "v- L'abréviation de la commande "bind" est ":attribute name="attribute value"" pour personnaliser les attributs.

L'environnement d'exploitation de ce tutoriel : système Windows 7, vue version 2.9.6, ordinateur DELL G3.

Comment ajouter des attributs personnalisés aux éléments dans Vuejs

Il existe un scénario : v-for affiche une liste avec 10 sous-éléments et ajoute un attribut data-wow-delay=' aux éléments après le 5ème sous -item 0.8s', l'implémentation est la suivante :

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

Vous pouvez proposer une méthode pour ajouter des attributs personnalisés aux éléments

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

Bien sûr, si vous ajoutez simplement un attribut commun (attribut css), tel que la classe, style, etc., la méthode suivante peut également être utilisée .

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

Explication : instruction v-bind

v-bind est principalement utilisé pour la liaison d'attributs. Vue fournit officiellement une abréviation : bind, par exemple :

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

Recommandations associées : "Tutoriel vue.js"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!