Vue Switch Case Example

Vue.Js , Vue

Nicesnippets

30588

11-03-2021


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...