lista de directivas vue y sus usos ejemplo de código

Te recomendamos que pruebes esta respuesta en un entorno controlado antes de enviarlo a producción, saludos.

Ejemplo: lista de directivas de vuejs

/* Here we have 5 vuejs directive to use:
v-text
v-once
v-html
v-bind
v-model
*/// ------------ v-text ------------// Description: Instead of using interpolation, you can use the v-text directive. It performs the same job:<span v-text="name"></span>// ------------ v-once ------------/* Description:
You know how  name  binds to the name property of the component data.

Any time name changes in your component data, Vue is going to update the value represented in the browser.

Unless you use the v-once directive, which is basically like an HTML attribute:
*/<span v-once> name </span>// ------------ v-html ------------/* Description:
When you use interpolation to print a data property, the HTML is escaped. This is a great way that Vue uses to automatically protect from XSS attacks.

There are cases however where you want to output HTML and make the browser interpret it. You can use the v-html directive:
*/<span v-html="someHtml"></span>// ------------ v-bind ------------/* Description:
Interpolation only works in the tag content. You can’t use it on attributes.

Attributes must use v-bind:
*/<a v-bind:href="url"> linkText </a>// v-bind is so common that there is a shorthand syntax for it:<a v-bind:href="url"> linkText </a><a :href="url"> linkText </a>// ------------ Two-way binding using v-model ------------/* Description:
v-model lets us bind a form input element for example, and make it change the Vue data property when the user changes the content of the field:
*/<input v-model="message" placeholder="Enter a message"><p>Message is: message </p>// More example of v-model:<select v-model="selected"><option disabled value="">Choose a fruit</option><option>Apple</option><option>Banana</option><option>Strawberry</option></select><span>Fruit chosen: selected </span>

valoraciones y reseñas

Recuerda dar recomendación a este artículo si te fue útil.

---

---

Utiliza Nuestro Buscador