JSFiddle - React, Tailwind, and code Playground

by kurotanshi

HTML

<script src="https://unpkg.com/vue@next"></script>
<div id="app">
  <label>
    <input type="checkbox" v-model="isShow"> isShow: {{ isShow }}
  </label>

  <div class="wrap">
    <div v-if="isShow"> V-if </div>
    <div v-show="isShow"> V-show </div>
  </div>
</div>

SCSS

#app {
  display: block;  
  width: 100%;
  padding-top: 1rem;
}

.messages {
  padding: 6px 10px;
  width: 95%;
  height: 100px;
  margin-bottom: 1em;
  overflow-y: scroll;
  border: 1px solid #ccc;
}

input[type="text"] {
  padding: 3px 5px;
  width: 95%;
}

JavaScript

const vm = Vue.createApp({
  data: () => {
    return {
      msg: '',
      messages: []
    }
  },
  methods: {
    addToMessages() {
      this.messages.push(this.msg);
      this.msg = '';
    }
  }
}).mount('#app');