Vue es un marco progresivo para construir interfaces de usuario. La biblioteca principal se centra solo en la capa de visualización y es fácil de seleccionar e integrar con otras bibliotecas. Vue también es perfectamente capaz de impulsar sofisticadas aplicaciones de una sola página en combinación con herramientas modernas y bibliotecas de soporte.
Usando Vue.js, uno puede agregar o eliminar fácilmente elementos en una lista dinámicamente usando la directiva v-model. Esta directiva une todas las posibilidades a un solo canal. Cuando el usuario selecciona una opción de la lista de disponibles, la agrega a la lista de valores. Del mismo modo, si el usuario deselecciona alguna opción, la elimina de la lista de valores.
Ejemplo:
index.html
<html>
<head>
<script src=
"https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">
</script>
</head>
<body>
<div id='parent'>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<p><strong>Favourite Sports:</strong>
</p>
<input type="checkbox" id="cricket"
value="cricket" v-model="sports">
<label for="cricket">Cricket</label>
<input type="checkbox" id="football"
value="football" v-model="sports">
<label for="football">Football</label>
<input type="checkbox" id="hockey"
value="hockey" v-model="sports">
<label for="hockey">Hockey</label>
<input type="checkbox" id="badminton"
value="badminton" v-model="sports">
<label for="badminton">Badminton</label>
<input type="checkbox" id="arching"
value="arching" v-model="sports">
<label for="arching">Arching</label>
<p><strong>Sports You Like:</strong>
{{ sports }}
</p>
</div>
<script src='app.js'></script>
</body>
</html>
app.js
const parent = new Vue({
el : '#parent',
data : {
sports : []
}
})
Producción:
Publicación traducida automáticamente
Artículo escrito por hunter__js y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA