MENU
  1. ホーム
  2. JS
  3. Vue.js
  4. 選択ボックス

選択ボックス

Vue.js
2023.08.08

選択ボックスは、select要素にv-modelを指定すれば使用できます。

ディレクティブ選択ボックスの説明図
記法

[ HTML ] =============================
　<select v-model=”データプロパティ名”>
　　<option value=””>項目名</option>
　</select>

[ Vue.js ] =============================
　data() {
　　return {
　　　データプロパティ名 : 初期値;
　　},
　},

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>選択ボックスについて</title>
  </head>
  <body>
    <div id="app">
      <p>選択して動きを確認しましょう。</p>
      <form>
        <select v-model="job">
          <option value="">選択してください</option>
          <option value="公務員">公務員</option>
          <option value="経営者・役員">経営者・役員</option>
          <option value="会社員">会社員</option>
          <option value="自営業">自営業</option>
          <option value="専業主婦">専業主婦</option>
          <option value="パート・アルバイト">パート・アルバイト</option>
          <option value="学生">学生</option>
          <option value="その他">その他</option>
        </select>
      </form>
      <p>仕事:{{ job }}</p>
    </div>

    <script src="./js/select.js"></script>
  </body>
</html>
Vue.createApp({
  data() {
    return {
      job: "",
    };
  },
}).mount("#app");
出力結果

選択して動きを確認しましょう。

仕事:

Vue.js