lmiller1990

vuejs switch case

A Vue.js switch/case directive

Version Version: 1.0.3 Version Updated: 12/28/2018 By: lmiller1990 License: MIT

DownloadsLast30Days: 1.5k

https://github.com/lmiller1990/v-switch-case

npm i v-switch-case
yarn add v-switch-case

v-switch-case

A simple v-switch, v-case and v-default directive set for Vue.

Live Demo: https://lmiller1990.github.io/v-switch-case/

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

Installation

npm:

npm install v-switch-case

yarn:

yarn add v-switch-case

Or using a script tag:

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

Use

Node.js env (using webpack for example):

<template>
  <div v-switch="size">
    <h1 v-case="'large'">Large</h1>
    <h2 v-case="'medium'">Medium</h2>
    <h3 v-case="'small'">Small</h3>
  </div>
</template>

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

Vue.use(VSwitch)

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

From a 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>

On NPM: https://www.npmjs.com/package/v-switch-case