JSFiddle - React, Tailwind, and code Playground

by kurotanshi

HTML

<script src="https://unpkg.com/vue@next"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<div id="app">
  Edit: <input
    type="text" 
    v-model.trim="message"
    placeholder="請勿超過十個字"
    :style="msgStyle">
</div>

CSS

body {
  padding: 1rem;
}

input {
  width: 300px;
  padding: 3px;
}

JavaScript

const vm = Vue.createApp({
  data () {
    return {
      message: ''
    }
  },
  computed: {
    isVaild: function() {
      return this.message.length <= 10;
    },
    msgStyle: function() {
      return {
        'border': this.isVaild ? '' : 'red solid 1px',
        'color': this.isVaild ? '' : 'red'
      };
    }
  }
}).mount('#app');