Style Switcher with VueJS

by nevkatz

HTML

<script src="https://npmcdn.com/vue/dist/vue.js"></script>


<div id="root">
    <div id="radios" v-for="theme in themes">
      <input :value="theme" name="theme-select" type="radio" v-model="selected">{{ theme }}
    </div>
    <div id="output">
       {{ selected }}
       <div id="sample" :class="selected">
       
       </div>
    </div>
</div>

CSS

.dark {
  background-color: black;
}
.modern {
  background-color: grey;
}
.light {
  background-color: lightyellow;
}
.gemstone {
  background-color: dodgerblue;
}
#sample {
  border: 1px solid #000;
  height: 100px;
  width: 100px;
}

JavaScript

new Vue({
   el:'#root',
   data: {
      themes:['dark','modern','light','gemstone'],
      selected:'dark'
 
   } 
})