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>