v-switch-case

A Vue.js switch/case directive

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
v-switch-case
3161.0.34 years ago5 years agoMinified + gzip package size for v-switch-case in KB

Readme

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>

Links

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