Computed in Vue.js – soloscuola

In questa lezione parleremo di computed in Vue.js, una funzionalità fondamentale di Vue.js per gestire la logica reattiva all’interno delle applicazioni.

Le computed properties in Vue.js sono funzioni calcolate dinamicamente che restituiscono un valore in base allo stato dei dati reattivi. Queste proprietà sono memorizzate nella cache e sono ricalcolate solo quando le dipendenze effettive cambiano. Questo significa che se una o più dipendenze cambiano, il valore calcolato sarà aggiornato automaticamente. Le computed properties sono ideali per calcoli derivati da uno o più dati reattivi.

Esempio Computed in Vue.js

Realizziamo un esempio completo di un componente Vue.js che include un campo di input per il raggio del cerchio e mostra dinamicamente l’area calcolata del cerchio utilizzando una computed property:

Raggio del cerchio:

L’area del cerchio è: {{ area }}

import { ref, computed } from ‘vue’; export default { name: ‘CircleArea’, data() { return { radius: 0 }; }, computed: { area() { const areaCerchio = Math.PI * Math.pow(this.radius, 2); return areaCerchio.toFixed(2); } } };

In questo esempio ho utilizzato un campo di input per il raggio del cerchio, legato alla variabile radius tramite v-model. Poi ho utilizzato una computed property chiamata area

Continua la lettura su: https://www.codingcreativo.it/computed-in-vue-js/ Autore del post: Cristina Parma Fonte:

Articoli Correlati