JSFiddle - React, Tailwind, and code Playground

by euledge

HTML

<div id="example">
  <input type="text" class="form-control" id="name" v-model="name" v-bind:class="{'alert-color': !isSuccess }">
</div>

CSS

.alert-color {
  border-color: red;
}

Vue

var vm = new Vue({
  el: '#example',
  data: {
    name: 'Hello'
  },
  computed: {
    // 算出 getter 関数
    isSuccess: function () {
      return this.name.length <= 10
    }
  }
})