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">
  <!-- 注意下面 input 對應的都是 v-model="checkedNames"  -->
  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
  <label for="jack">Jack</label>
  
  <input type="checkbox" id="john" value="John" v-model="checkedNames">
  <label for="john">John</label>
  
  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
  <label for="mike">Mike</label>
  
  <input type="checkbox" id="mary" value="Mary" v-model="checkedNames">
  <label for="mary">Mary</label>

  <br>
  <p>Checked names: {{ checkedNames }}</p>
</div>

CSS

body {
  padding: 1rem;
}

label {
  margin-left: 10px;  
  margin-right: 1rem;
}

JavaScript

// 因為是複選的關係，這裡的 checkedNames 是陣列
const vm = Vue.createApp({
  data () {
    return {
      checkedNames: []
    }
  }
}).mount('#app');