Vue calculado com parâmetro

A propriedade calculada é geralmente usada para calcular dados de alguns outros dados. É conhecido por sua reatividade, porque sempre que uma variável envolvida em alguma propriedade calculada é alterada, toda a propriedade é recomputada.Esta postagem aprenderá a passar no parâmetro para a propriedade calculada e ver como usar o VUE calculado com parâmetro. Antes de começar com os parâmetros de passagem para a propriedade computada, vamos primeiro entender as propriedades computadas passando pelo exemplo.

Exemplos

Suponha que tenhamos duas variáveis ​​chamadas "FirstName" e "LastName" em nosso componente Vue:

//…
dados()
retornar
primeiro nome: "",
sobrenome: ""

,
//…

Propriedade calculada

Queremos calcular uma propriedade "FullName" que combine o "primeiro nome" e o "nome do último" e recompugue o nome completo sempre que qualquer uma das duas variáveis ​​"primeiro nome" e "lastname" é alterada. Portanto, a propriedade computada para calcular o nome completa seria assim:

//…
calculado:
nome completo()
devolver isso.primeiro nome + " + this.sobrenome;


//…

Agora, vamos criar alguns campos de entrada e vincular as variáveis ​​"FirstName" e "SounName" aos campos de entrada e também vincular a propriedade "FullName" na tag 'P' para visualizar a mudança instantânea na mudança do primeiro anime do último nome. A parte HTML deste componente será assim:

Tudo bem! Depois de ter toda essa configuração, vamos dar uma olhada em nossa página da web.

Se você escreveu com sucesso o código correto e o execute, também deve ter os dois campos de entrada em sua página da web. Vamos tentar digitar o primeiro nome e o sobrenome e ver a propriedade "fulname" é calculada ou não.

Aqui na captura de tela fornecida acima, você pode testemunhar a maravilhosa reatividade de Vue.JS usando a propriedade computada. Você também pode testemunhar que não é como assistir a uma única variável e alterar o valor de outra variável. Ainda assim, está assistindo a cada variável incluída na propriedade computada e recompra o "nome do último". Vamos ver como podemos passar os parâmetros para a propriedade computada e usá -la.

Passe os parâmetros para a propriedade computada

Para passar os parâmetros para a propriedade computada, apenas passamos os parâmetros como fazemos para a função. Por exemplo, no modelo, quando vincularmos a variável "LastName", queremos passar por alguma string, para que a parte do modelo do nosso componente seria assim:

Agora, na propriedade computada, o parâmetro aprovado pode ser utilizado usando a seguinte sintaxe.

calculado:
nome completo()
retornar mensagens1 =>
return '$ message $ this.primeiro nome $ this.sobrenome'

É assim que podemos passar um parâmetro para o calculado e colocá -lo na propriedade e usá -lo.

Se olharmos novamente para a nossa página da web e digitar o primeiro nome e o sobrenome, você poderá ter a mesma funcionalidade e reatividade, mas desta vez, o parâmetro passou.

É assim que é simples e fácil passar um parâmetro de propriedade calculado e usá -lo.

Conclusão:

A propriedade computada é uma característica muito poderosa do Vue.JS, e nós aprendemos que é útil quando precisamos alterá -los quando suas dependências são alteradas. Aprendemos a passar no parâmetro e usá -lo na propriedade computada.