V-Switch-Case - A V-Switch Component for Vue Js

lmiller1990 introduced a simple v-switch, v-case, and v-default directive set for Vue.js 2. If you have multiple tests cases for a particular expression. we can utilize the switch statement instead of writing multiple if/else statements in vue. So you can practice the v-switch-case in this condition. If you want something similar for Vue.js 3, you can check out v-switch.

You can view its live demo here:

Example:

<div v-switch="size">
  <h1 v-case="'large'">Large</h1>
  <h2 v-case="'small'">Medium</h2>
  <h3 v-default>Default</h3>
</div>

Installation

You have to run this command for the installation via npm.

npm install v-switch-case

Or you can use script tag:

<script src="https://unpkg.com/v-switch-case@1.0.2/dist/v-switch.min.js"></script>

Usage

Node.js env (using webpack for example):

<template>
  <div v-switch="subjects">
    <h1 v-case="'maths'">Maths</h1>
    <h2 v-case="'english'">English</h2>
    <h3 v-case="'computer'">Computer</h3>
  </div>
</template>

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

Vue.use(VSwitch)

export default {
  data() {
    return {
      size: 'english'
    }
  }
}
</script>

You can also use it with CDN:

<script src="https://unpkg.com/v-switch-case@1.0.2/dist/v-switch.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.21/vue.js"></script>

<script>
Vue.use(VSwitch)
</script>

If you wanted to employ this package in your project you can view its complete guide on Github.