Vue calcolato con parametro

La proprietà calcolata viene generalmente utilizzata per calcolare i dati da alcuni altri dati. È noto per la sua reattività perché ogni volta che una variabile coinvolta in alcune proprietà calcolate viene modificata, l'intera proprietà viene ricompensata.Questo post imparerà a passare il parametro per la proprietà calcolata e vedere come utilizzare Vue calcolato con parametro. Prima di iniziare con i parametri di passaggio alla proprietà calcolata, comprendiamo prima le proprietà calcolate passando attraverso l'esempio.

Esempi

Supponiamo di avere due variabili denominate "FirstName" e "LastName" nel nostro componente Vue:

// ..
dati()
ritorno
nome di battesimo: "",
cognome: ""

,
// ..

Proprietà calcolata

Vogliamo calcolare una proprietà "fullname" che combinerà il "firstname" e "lastname" e ricompingrà il fullname ogni volta che una delle due variabili "firstname" e "lastname" vengono cambiate. Quindi, la proprietà calcolata per il calcolo del nome completo sarebbe così:

// ..
calcolato:
nome e cognome()
Restituisci questo.primo nome + " + questo.cognome;


// ..

Ora creiamo alcuni campi di input e leghiamo le variabili "firstname" e "lastname" ai campi di input e vincola anche la proprietà "fullname" nel tag "p" per visualizzare la modifica istantanea sulla modifica del primo anime dell'ultimo nome. La parte HTML di questo componente sarà così:

Bene! Dopo aver avuto tutta questa configurazione, diamo un'occhiata alla nostra pagina web.

Se hai scritto correttamente il codice corretto ed eseguirlo, dovresti anche avere i due campi di input sulla tua pagina web. Proviamo a digitare il nome e il cognome e vediamo la proprietà "Fulname" viene calcolata o no.

Qui nello screenshot sopra indicato, puoi assistere alla meravigliosa reattività di Vue.JS usando la proprietà calcolata. Puoi anche testimoniare che non è come guardare una singola variabile e cambiare il valore di un'altra variabile. Tuttavia, sta guardando ogni variabile inclusa nella proprietà calcolata e re-calcolare il "LastName". Vediamo come possiamo passare i parametri alla proprietà calcolata e usarla.

Passare i parametri alla proprietà calcolata

Per passare i parametri alla proprietà calcolata, passiamo solo i parametri come facciamo per la funzione. Ad esempio, nel modello, quando abbiamo legato la variabile "LastName", vogliamo passare un po 'di stringa, quindi la parte del modello del nostro componente sarebbe così:

Ora, nella proprietà calcolata, il parametro passato può essere utilizzato utilizzando la seguente sintassi.

calcolato:
nome e cognome()
return message1 =>
return '$ message $ questo.FirstName $ questo.cognome'

Ecco come possiamo passare un parametro al calcolo e ottenerlo nella proprietà e usarlo.

Se guardiamo di nuovo la nostra pagina web e digitiamo il nome e il cognome, puoi avere la stessa funzionalità e reattività, ma questa volta il parametro è passato.

Questo è quanto è semplice e facile passare un parametro di proprietà calcolato e usarlo.

Conclusione:

La proprietà calcolata è una caratteristica molto potente di Vue.js, e abbiamo imparato che è utile quando dobbiamo cambiarli quando le loro dipendenze vengono cambiate. Abbiamo imparato a passare il parametro e utilizzarlo nella proprietà calcolata.