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.
En Vue.js, cualquier valor de datos se puede generar usando paréntesis. Sin embargo, esto puede albergar cálculos pequeños ya que está limitado a una sola expresión de JavaScript, y también que las plantillas solo deben preocuparse por mostrar datos al usuario y no realizar ningún cálculo lógico. Para evitar esta limitación de una sola expresión y tener más plantillas declarativas, usamos propiedades computadas de Vue.js. El valor calculado sigue la misma interpolación antigua, pero la lógica de cálculo se define en JavaScript.
Ejemplo 1:
index.html
<html>
<head>
<script src=
"https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">
</script>
</head>
<body>
<div id='parent'>
<p>{{ fullName }}</p>
</div>
<script src='app.js'></script>
</body>
</html>
app.js
const parent = new Vue({
el: '#parent',
data: {
fName: 'Aiser',
lName: 'Wold'
},
computed: {
fullName: function () {
return `Full Name :
${this.fName} ${this.lName}`
}
}
})
Producción:
Propiedades calculadas
Ejemplo 2:
index.html
<html>
<head>
<script src=
"https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">
</script>
</head>
<body>
<div id='parent'>
<h2>Animal Helping NGO</h2>
<p><strong>Total Members :</strong>
{{ totalMembers }}
</p>
<p><strong>Donations from Male members :
</strong> {{ maleDonation }}
</p>
<p><strong>Donations from female members :
</strong> {{ femaleDonation }}
</p>
</div>
<script src='app.js'></script>
</body>
</html>
app.js
const parent = new Vue({
el: '#parent',
data: {
mMembers: ['Arun', 'Raj', 'Kabir',
'Santanu','Aiser','Mikie'],
fMembers: ['Tina','Jagriti','Nupur',
'Nancy','Rinkle']
},
computed: {
totalMembers: function() {
return this.mMembers.length +
this.mMembers.length
},
maleDonation: function() {
return this.mMembers.length * 100;
},
femaleDonation: function() {
return this.fMembers.length * 50
}
}
})
Producción:
propiedades calculadas
Referencia: https://012.vuejs.org/guide/computed.html
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