VueのInput周りの用法

チェックボックス、ラジオボタン、複数セレクト、テキスト入力など。

inputs.vue

<template>
  <div id="app">
    <h4>Check Boxes</h4>
    <input type="checkbox" id="checkbox" v-model="checked" />
    <label for="checkbox">This box is {{ checked ? 'checked' : 'unchecked' }}</label>
    <hr />

    <h4>Radio Buttons</h4>
    <div v-for="(dino, index) in dinos" :key="index">
      <label>
        <input type="radio" :value="dino" v-model="chosenDino" />
        {{ dino }}
      </label>
      <br />
    </div>
    <span>Favorite: {{ chosenDino }}</span>
    <hr />

    <h4>Multi Select:</h4>
    <select v-model="selected" multiple>
      <option
        v-for="(period, index) in periods"
        :value="period.value"
        :key="index"
      >{{ period.name }}</option>
    </select>
    <br />
    <span>Selected IDs: {{ selected }}</span>
    <hr />

    <h4>Text Input:</h4>
    <input type="text" v-model="single" />
    <p>{{ single }}</p>
    <hr />

    <h4>Multiline message:</h4>
    <textarea v-model="message" placeholder="add multiple lines"></textarea>
    <p style="white-space: pre">{{ message }}</p>
  </div>
</template>

<script>
import "./dark.min.css";

export default {
  data() {
    return {
      checked: false,
      selected: [],
      chosenDino: "",
      single: "",
      message: "",
      dinos: ["Triceratops", "Velociraptor", "Tyrannosaurus"],
      periods: [
        { name: "Triassic", value: 1 },
        { name: "Jurassic", value: 2 },
        { name: "Cretaceous", value: 3 }
      ]
    };
  },
  methods: {
    addDinos: function() {
      this.count += this.amount;
    }
  }
};
</script>