Este artículo cubre la diferencia entre v-model y v-bind en Vue.js. Los siguientes pasos se utilizan para explicar sus diferencias.
El modelo v es un enlace bidireccional, lo que significa que si cambia el valor de entrada, los datos enlazados cambiarán. La directiva v-model se usa para crear enlaces de datos bidireccionales en la entrada de formulario, el área de texto y los elementos de selección.
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<title>Difference between v-model and v-bind</title>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
}
p {
padding-left: 20px;
}
h1,h2 {
text-align: center;
}
h1{
color: green;
font-size: 40px;
}
</style>
</head>
<body>
<section id="app-vue">
<h1>GeeksforGeeks</h1>
<h2>V-Model Example</h2>
<div class="container">
<input type='text' v-model='Message' />
<p> Message: {{ Message}} </p>
</div>
</section>
<script>
new Vue({
el: '#app-vue',
data() {
return {
Message: ''
}
}
});
</script>
</body>
</html>
Salida: este ejemplo significa que si nuestros datos cambian, nuestra entrada también cambiará, y si nuestra entrada cambia, nuestros datos también cambiarán.
El v-bind se denomina enlace unidireccional, lo que significa que vincula nuestros datos de una manera. También se puede utilizar para enlazar atributos HTML. Este ejemplo muestra un enlace de datos unidireccional usando nuestro elemento de estilo usando v-bind.
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<title>Difference between v-model and v-bind</title>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
}
h1,
h2 {
text-align: center;
}
h1 {
color: green;
font-size: 40px;
}
</style>
</head>
<body>
<section id="app-vue">
<h1>GeeksforGeeks</h1>
<h2>V-bind Example</h2>
<div v-bind:style="headingText">
Ezekiel Michael
</div>
</section>
<script>
new Vue({
el: '#app-vue',
data: {
headingText: {
color: 'red',
fontSize: '40px',
textAlign:'center'
}
}
});
</script>
</body>
</html>
Producción:
A continuación se muestran las diferencias entre v-model y v-bind
| MODELO V | ENLACE EN V |
| El modelo v se puede cambiar o asignar. | Solo se puede asignar v-bind. |
| v-model es un enlace bidireccional. | v-bind es un enlace unidireccional. |
| v-model se utiliza para vincular elementos de formulario como entradas, botones de opción, área de texto, casillas de verificación. | Se utiliza para vincular datos, atributos, expresiones, clases, estilos. |
| El modelo V es sensible al valor de entrada. | También se utiliza para pasar accesorios a componentes secundarios. |
| Se puede implementar utilizando el observador de variables locales. | Es una directiva que se utiliza para vincular uno o más atributos. |
Publicación traducida automáticamente
Artículo escrito por lawsonezekiel68 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA