Vue.js - Conditionals and loops

by wistcc

HTML

<script src="https://unpkg.com/[email protected]"></script>
<div id="app">
  <span @click="isVisible = !isVisible">
    <button v-if="isVisible">Hide cast</button>
    <button v-else>Show cast</button>
  </span>
  <div v-show="isVisible">
    <h3>Breaking Bad cast</h3>
    <ul>
      <li v-for="actor in cast">
        <strong>{{actor.name}}</strong> {{` as ${actor.character}.`}}
      </li>
    </ul>
  </div>
</div>

JavaScript

var app = new Vue({
  el: '#app',
  data: {
    cast: [
    	{ name: 'Bryan Cranston', character: 'Walter White'},
    	{ name: 'Anna Gunn', character: 'Skyler White'},
    	{ name: 'Aaron Paul', character: 'Jesse Pinkman'},
    	{ name: 'Dean Norris', character: 'Hank Schrader'},
    	{ name: 'Bob Odenkirk', character: 'Saul Goodman'},
    	{ name: 'Jonathan Banks', character: 'Mike Ehrmantraut '},
    	{ name: 'Giancarlo Esposito', character: 'Gustavo \'Gus\' Fring'},
    ],
    isVisible: true,
  }
})