Directivas

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 “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.

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"