How to customize attributes in vuejs

In vuejs, you can use the "v-bind" instruction to customize attributes. This instruction is mainly used for attribute binding. The syntax is "v-bind:custom attribute name="attribute value""; you can also Use the abbreviation of the "v-bind" command ":property name="property value"" to customize the property.

The operating environment of this tutorial: windows7 system, vue2.9.6 version, DELL G3 computer.

How Vuejs adds custom attributes to elements

There is such a scenario: v-for renders a list with 10 sub-items, and puts the Add an attribute data-wow-delay='0.8s' to each element, and the implementation is as follows:

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

You can get a method to add custom attributes to elements

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

Of course, if you just add A common attribute (css attribute), such as class, style, etc., the following method can also be used.

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

Description: v-bind instruction

v-bind is mainly used for attribute binding. Vue officially provides an abbreviation: bind, for example:

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

Related recommendations: "vue.js Tutorial"

The above is the detailed content of How to customize attributes in vuejs. For more information, please follow other related articles on the PHP Chinese website!