9. checkbox, radio, select

HTML

<div id="app">
  <fildset>
    <input v-for="fruit in ['Apple', 'Banana', 'Strawberry']" type=checkbox v-model="fruits" :value="fruit"/>
  </fildset>
  <div>
    {{ fruits }}
  </div><br/><br/>
  
  <fildset>
    <span v-for="(group, index) in groups">
        <label>{{ group }}<input type=radio v-model="radio" :value="group"/></label><br/>
    </span>
  </fildset><br/>
  
  <div>{{ radio }}</div>
  <div v-once>{{ radio }}</div><br/><br/>
  
  <select v-model="planet">
    <option v-text="selectDefault"></option>
    <option v-for="planet in planets" v-text="planet"></option>
  </select>
  <div v-text="planet"></div>
</div>

Vue

new Vue({
	el: '#app',
  data: {
  	selectDefault: '선택해 주세욤',
		fruits: [],
    groups: ['red velvet', 'black pink', 'twice'],
    radio: 'red velvet',
    planets: ['earth', 'sun', 'moon'],
    planet: '',
  },
  created: function() {
    this.$nextTick(function() {
			this.planet = this.selectDefault;
    });
  },
});