Blog Detail

5

Aug
V-Switch-Case - A V-Switch Component for Vue Js cover image

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.

Published at : 05-08-2021

Author : Rizwan Aslam
AUTHOR
Rizwan Aslam

I am a highly results-driven professional with 12+ years of collective experience in the grounds of web application development especially in laravel, native android application development in java, and desktop application development in the dot net framework. Now managing a team of expert developers at Codebrisk.

web application development client
web application development client
web application development client
web application development client
web application development client

Launch project