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 11

Preguntas 1

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

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.

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

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

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.

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>

excelente clase, no me gusta mucho pug pero nunca est谩 de mas aprender a utilizar m谩s herramientas

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"