Directivas

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 “v” 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"