Musinux/vuejs-if-else-filter-example.html

## vuejs-if-else-filter-example.html
<!doctype html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <title>Titre de la page</title>
<style>
nav ul li {
  display: inline-block;
  border: 1px solid red;
  width: 200px;
}
</style>
  </head>
  <body>
    <main id="app">
      <nav>
        <ul>
          <li v-on:click="currentPage = 'accueil'">Accueil</li>
          <li v-on:click="currentPage = 'quisommesnous'">Qui sommes-nous ?</li>
        </ul>
      </nav>
      <section v-if="currentPage === 'accueil'" id="accueil">
        <h1>Ceci est la page d'accueil</h1>
        <p>Ceci est un petit texte pour accueillir nos visiteurs</p>
      </section>

      <section v-else-if="currentPage === 'quisommesnous'" id="quisommesnous">
        <h1>Ceci est la page qui sommes-nous ?</h1>
        <p>Ceci est le texte qui décrit qui je suis</p>
      </section>
      <section v-else-if="currentPage === 'liste'" id="liste">
        <input type="text" v-model="filter">
        <button v-on:click="menu = 'dessert'">Cliquez !</button>
        <ul>
          <li v-for="item in myFilter()">{{ item.id }} {{ item.type }}</li>
        </ul>
      </section>
    </main>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
  el: '#app',
  data: {
    currentPage: 'liste',
    filter: '',
    menu: '',
    myList: [{
      id: 1,
      type: 'dessert'
    }, {
      id: 2,
      type: 'entrée'
    }, {
      id: 3,
      type: 'entrée'
    }, {
      id: 4,
      type: 'dessert'
    }]
  },
  methods: {
    myFilter () {
      if (this.filter !== '')  {
        return this.myList.filter(elem => elem.type.indexOf(this.filter) !== -1)
      } else if (this.menu !== '') {
        return this.myList.filter(elem => elem.type === this.menu)
      }
    }
  }
})
</script>
  </body>
</html>
	<!doctype html>
	<html lang="fr">
	<head>
	<meta charset="utf-8">
	<title>Titre de la page</title>
	<style>
	nav ul li {
	display: inline-block;
	border: 1px solid red;
	width: 200px;
	}
	</style>
	</head>
	<body>
	<main id="app">
	<nav>
	<ul>
	<li v-on:click="currentPage = 'accueil'">Accueil</li>
	<li v-on:click="currentPage = 'quisommesnous'">Qui sommes-nous ?</li>
	</ul>
	</nav>
	<section v-if="currentPage === 'accueil'" id="accueil">
	<h1>Ceci est la page d'accueil</h1>
	<p>Ceci est un petit texte pour accueillir nos visiteurs</p>
	</section>

	<section v-else-if="currentPage === 'quisommesnous'" id="quisommesnous">
	<h1>Ceci est la page qui sommes-nous ?</h1>
	<p>Ceci est le texte qui décrit qui je suis</p>
	</section>
	<section v-else-if="currentPage === 'liste'" id="liste">
	<input type="text" v-model="filter">
	<button v-on:click="menu = 'dessert'">Cliquez !</button>
	<ul>
	<li v-for="item in myFilter()">{{ item.id }} {{ item.type }}</li>
	</ul>
	</section>
	</main>

	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
	const app = new Vue({
	el: '#app',
	data: {
	currentPage: 'liste',
	filter: '',
	menu: '',
	myList: [{
	id: 1,
	type: 'dessert'
	}, {
	id: 2,
	type: 'entrée'
	}, {
	id: 3,
	type: 'entrée'
	}, {
	id: 4,
	type: 'dessert'
	}]
	},
	methods: {
	myFilter () {
	if (this.filter !== '') {
	return this.myList.filter(elem => elem.type.indexOf(this.filter) !== -1)
	} else if (this.menu !== '') {
	return this.myList.filter(elem => elem.type === this.menu)
	}
	}
	}
	})
	</script>
	</body>
	</html>