JSFiddle - React, Tailwind, and code Playground

by lin zhou

HTML

<script src="https://unpkg.com/vue"></script>

<div id="app1">
  <select v-model="selected">
    <option disabled="false" value=''>请选择</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <span>{{selected}}</span>
</div>
<p></p>

<div id="app2">
  <select v-model="selected" multiple>
    <option>A</option>
    <option>B</option>
    <option>C</option>
    <option>D</option>
  </select>
  <span>{{selected}}</span>
</div>

<p></p>
<div id="app3">
  <select v-model="selected">
  <option v-for="option in options" v-bind:value="option.value">{{option.text}}</option>
  </select>
  <span>{{selected}}</span>
</div>

CSS

body {
  font-size:14px;
}

JavaScript

// 选择列表（单选，多选）
let vm1 = new Vue({
  el: "#app1",
  data: {
    "selected": ""
  }
});

let vm2 = new Vue({
	el:"#app2",
  data:{
  	"selected":[]
  }
})

let vm3 = new Vue({
	el:"#app3",
  data:{
  	"selected":"C",
    "options":[
    	{"text":"One", "value":"A"},
      {"text":"Two", "value":"B"},
      {"text":"Three", "value":"C"}
    ]
  }
});