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">
  <!-- 注意，v-model 要放在 select 而不是 option -->
  <select v-model="selected">
    <option disabled value="">請選擇</option>
    <option>台北市</option>
    <option>新北市</option>
    <option>基隆市</option>
  </select>
  
  <p>Selected: {{ selected || '未選擇' }}</p>
</div>

CSS

body {
  padding: 1rem;
}

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

JavaScript

const vm = Vue.createApp({
  data () {
    return {
      selected: ''
    }
  }
}).mount('#app');