• 技術が集うTECH GUILD

    Vue.jsで主なフォーム部品のサンプルを表示してみました。

    概要

    以下のフォーム部品を試しています。

    1. input type=”text” 1行テキスト
    2. textarea 複数行テキスト
    3. チェックボックス
    4. ラジオボタン
    5. セレクトボックス
    6. 複数セレクトボックス

    ソース

    ソースは以下となります。

    form_sample.html
    <!DOCTYPE html>
    <html lang="ja">
    <head>
      <meta charset="utf-8">
      <title>Vueのform部品サンプル</title>
    </head>
    <body>
      <div id="app">
        <h3>テキスト</h3>
        <p>
          {{ text }}<br>
          <input type="text" v-model="text">
        </p>
        <hr>
    
        <h3>テキストエリア</h3>
        <p>
          {{ textarea }}<br>
          <textarea v-model="textarea"></textarea>
        </p>
        <hr>
    
        <h3>チェックボックス</h3>
        <input type="checkbox" v-model="check01">{{ check01 }}
        <input type="checkbox" v-model="check02">{{ check02 }}
        <hr>
    
        <h3>ラジオボタン</h3>
        <input type="radio" value="A" v-model="radio">A<br>
        <input type="radio" value="B" v-model="radio">B<br>
        <input type="radio" value="C" v-model="radio">C<br>
        <span>{{ radio }}</span>
        <hr>
    
        <h3>セレクトボックス</h3>
        <select v-model="select">
          <option disabled="disabled">選択してください</option>
          <option value="AA">AA</option>
          <option value="BB">BB</option>
          <option value="CC">CC</option>
        </select><br>
        {{ select }}
        <hr>
    
        <h3>複数セレクトボックス</h3>
        <select v-model="multipleselect" multiple>
          <option value="AAA">AAA</option>
          <option value="BBB">BBB</option>
          <option value="CCC">CCC</option>
        </select><br>
        {{ multipleselect }}
        <hr>
    
      </div>
      <script src="https://npmcdn.com/vue/dist/vue.min.js"></script>
      <script>
      var app = new Vue({
        el: '#app',
        data: {
          text: "1行テキストサンプル",
          textarea: "複数行テキストサンプル",
          check01: true,
          check02: false,
          radio: "",
          select: "",
          multipleselect: []
        }
      });
      console.log(app.text);
      </script>
    </body>
    </html>

    実行結果

    実行結果はこちら

    解説

    v-model属性を付与することで、Vueの特徴であるデータバインディングが設定されます。
    データバインディングを設定することにより、画面表示とJavaScriptで変数の値の同期が取れます。
    入力ボックスの<input type=”text” v-model=”text”>の値を変更すると、画面表示の{{ text }}が書き換わります。
    JavaScriptからは、 console.log(app.text)にあるようにapp.textで値にアクセスできます。


    コメントを残す

    このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください