Vue Dynamic Classes

by Pablo Gutiérrez

HTML

<div id="app">
  <h1>
  Forms:
  </h1>
  <div v-for="(field, index) in form" :key="index">
    <span :class="field.class">
      Using {{field.class}} class  
    </span>
  </div>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

h1 {
  font-weight: bold;
  margin-bottom: 15px;
}

.red-theme {
  color: red;
}


.green-theme {
  color: green;
}


.blue-theme {
  color: blue;
}

Vue

new Vue({
  el: "#app",
  data: {
			form: {
         input1: {value: "", class: "red-theme"},
         input2: {value: "", class: "blue-theme"},
         input3: {value: "", class: "green-theme"}
      },
      theme1: 'blue-theme',
      theme2: 'red-theme',
      theme3: 'green-theme'
  },
  methods: {
  	toggle: function(todo){
    	todo.done = !todo.done
    }
  }
})