Computed Properties en Vue.js

Es muy útil poder usar expresiones de JavaScript en las plantillas de Vue.js. Sin embargo, éstas pueden agregarle complejidad innecesaria a nuestro template. Además, en las plantillas estamos limitados a una expresión por valor o interpolación (variable). En casos así, es muy conveniente utilizar las Computed properties, como aprenderemos en esta séptima lección del Curso de Vue.js.

Repositorio

Ver el código de esta lección en GitHub

Notas

Para declarar una computed property se coloca en la instancia de Vue.js:

computed: {
    nombre_variable: function () {
        //coloca la lógica aqui
    }
},

Para observar los cambios de una propiedad como alternativa a las computed properties es:

watch: {
    nombre_variable: function (nombre_variable) {
        //lo que sucederá cuando la propiedad cambie
    }
},

Para conocer más a fondo las computed properties como por ejemplo los setter, puedes consultar su documentación oficial.

Actividad

Mejora la funcionalidad de nuestro ejemplo para escribir el nombre introducido al revés usando computed properties.
Haz que se imprima al lado de los años de experiencia un mensaje indicando su nivel según el número de años:
- «Experto», después de 5 años.
- «Intermedio», después de 2 años.
- Principiante, si tiene uno o dos años de experiencias.

Anímate a hacer los ejercicios compártelo a través de los comentarios o haciendo un Pull Request a nuestro repositorio en GitHub