No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Directivas

13/53
Recursos

Las Directivas son peque帽os marcadores o atributos que podemos agregar a nuestros elementos HTML que nos sirven para aplicar transformaciones en esos mismos elementos.

Aportes 10

Preguntas 1

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Reg铆strate o inicia sesi贸n para participar.

Si quer茅is encontrar este tema en la documentaci贸n, esta en este apartado: https://vuejs.org/v2/guide/conditional.html

Existen dos directivas en Vue para mostrar contenido condicional: v-if & v-show.

v-if nos renderiza el elemento en el DOM cuando la condici贸n se cumple, mientras que v-show nos muestra el elemento que ya se encuentra renderizado en el DOM.

De esta forma, dependiendo de la interacci贸n que tendr谩 el usuario, nos convendr谩 usar una u otra.

Si un elemento ser谩 constantemente mostrado/ocultado, nos conviene que ya est茅 renderizado para una mejor performance mediante v-if.

Mientras que si el elemento se mostrar谩 eventualmente dado un evento espec铆fico, nos conviene renderizarlo s贸lo en ese instante mediante v-show.

Las directiva Vue se utilizan para manipular el dom estas comienzan con 鈥渧鈥 que se refiere al nombre del FromeWork, existe muchas directivas algunas para los eventos como v-on como tambien para interactuar que son v-show, v-if, v-else, v-else-if.

Con las directivas podemos controlar el DOM, pr谩cticamente nos permite usar las estructuras de control de JavaScript y poco m谩s

Esto igual se ve en el curso b谩sico, es una estructura un poco extra帽a pero te acostumbras xD

PD. Para usar v-for SIEMPRE debes poner v-bind:key para especificar la key del elemento

poniendo en pr谩ctica esta clase 馃檪:

<template lang="pug">
  #app
    input(v-model="name")
    br
    label {{ name }}
    br
    a(:href="name") GO
    h2 Has Click sobre el mono para ver varias p谩ginas de prueba
    span(@click="watchListOFlinks" :class="listOFlinks ? 'red' : 'green'") {{ listOFlinks ? '馃檳' : '馃檲'}}
    ul(style="list-style: none;" v-show="listOFlinks")
      li(v-for="i in listLinks" @click="valueInput(i.jw)") {{ i.jw }}
      li(v-for="i in listLinks" @click="valueInput(i.facebook)") {{ i.facebook }}
      li(v-for="i in listLinks" @click="valueInput(i.youtube)") {{ i.youtube }}
      li(v-for="i in listLinks" @click="valueInput(i.google)") {{ i.google }}
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  data() {
    return {
      name: '',
      url:'http://jw.org',
      listLinks: [{ jw:'https://jw.org', facebook:'https://facebook.com', youtube:'https://youtube.com', google:'https://google.com' }],
      listOFlinks: false
    }
  },

  methods: {
    watchListOFlinks() {
      this.listOFlinks = !this.listOFlinks;
    },
    valueInput(key) {
      this.name = key;
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.red {
  background-color: red;
  font-size: 45px;
  padding: 16px;
}

.green {
  background-color: green;
  font-size: 45px;
  padding: 16px;
}
</style>

Como recomendacion les diria que mejor buscaran aislar esa logica y ponerla fuera del template, para que sea mas facil de entender

Presiento que esto de ESLint mejorar谩 mis pr谩cticas de programaci贸n. si bien basta con leer las recomendaciones y aplicarlas al c贸digo. Ahora tengo un inspector que no me deja hacer lo que yo quiera.
Todo con buenas pr谩cticas

En Vue.js, una directiva es el t茅rmino usado para referirse a algunos atributos especiales, identificados con v-, que le indican a Vue.js que debe realizar ciertos cambios en un elemento del DOM, cada vez que la expresi贸n asociada con dicha directiva cambie.

馃憣

como dice @jhojangarcia eslint detecta como error cuando no pones key="" en el v-for, el key ser谩 el identificador que es unico.
para ello podemos poner un index asi:

v-for="(index, i) in items"  :key="index"