JSFiddle - React, Tailwind, and code Playground

by kurotanshi

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
<div id="app">
  <p>試著修改看看兩者差異</p>
  
  <p>
    <span>Multiline message is:</span> {{ message }}
  </p>
    
  <textarea v-model="message" placeholder="add multiple lines"></textarea>
  
  <!-- 雖然會顯示，但不會同步更新 -->
  <textarea placeholder="add multiple lines">{{ message }}</textarea>
  
</div>

CSS

body {
  padding: 1rem;
}

textarea {
  display: block;
  margin-top: 1rem;
}

JavaScript

const vm = Vue.createApp({
  data () {
   return {
      message: 'Hello'
    } 
  }
});

vm.mount('#app');