Vue Switch Case Example

Hi Guys,

Today,I will learn you how use switch Case in vue, we will show example of vue js switch case. we will install v-switch-case package for vue js switch case.

We recently looked at if statements in vue, but now it’s time to switch things up! We’d look to use the switch statement whenever we have multiple test case for a particular expression. If you find yourself writing multiple if/else statements in vue, this may be worth condensing into a switch statement in vue.

Installation

Now,I will install package v-switch-case.

npm install v-switch-case

Example

<template>
  <div v-switch="language">
    <h1 v-case="'php'">PHP</h1>
    <h2 v-case="'laravel'">LARAVEL</h2>
    <h3 v-case="'html'">HTML</h3>
    <h4 v-case="'css'">Css</h4>
  </div>
</template>

 
<script>
import Vue from 'vue'
import VSwitch from 'v-switch-case'

 
Vue.use(VSwitch)

 
export default {
  data() {
    return {
      language: 'php'
    }
  }
}
</script>

OutPut

PHP	

It will help you...