Nuclear Potato Monster

    v-switch-case

    1.0.3 • Public • Published

    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

    Install

    npm i v-switch-case

    DownloadsWeekly Downloads

    884

    Version

    1.0.3

    License

    MIT

    Unpacked Size

    1.69 MB

    Total Files

    23

    Last publish

    Collaborators

    • lmiller1990