入力フォームのデータ操作 - Vue.js

  • 作成日：
  • 最終更新日：2025/06/25

v-model ディレクティブ

v-model ディレクティブを使うと、ウェブページ上で入力された値が Vue インスタンスのデータに反映されます。双方向データバインディングといいます。

入力されたテキストと文字数を表示する

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="app">
      <input type="text" v-model="myText">
      <p>入力内容：{{ myText }}</p>
      <p>入力された文字数：{{ myText.length }}</p>
    </div>

    <!-- Vue アプリケーション -->
    <script>
      const { createApp } = Vue;

      createApp({
        data: function(){
          return {
            myText: ""
          };
        }
      }).mount('#app');
    </script>
  </body>
</html>

チェックボッス

チェックボックスの ON/OFF の状態を取得

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="app">
      <label for="mycheck"><input id="mycheck" type="checkbox" v-model="myCheck">チェック</label>
      <p>チェックボックスの状態：{{ myCheck }}</p>
    </div>

    <!-- Vue アプリケーション -->
    <script>
      const { createApp } = Vue;

      createApp({
        data: function(){
          return {
            myCheck: false
          };
        }
      }).mount('#app');
    </script>
  </body>
</html>

チェックした値を取得

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="app">
      <label for="win"><input id="win" type="checkbox" value="windows" v-model="myCheck">windows</label>
      <label for="mac"><input id="mac" type="checkbox" value="mac" v-model="myCheck">mac</label>
      <label for="linux"><input id="linux" type="checkbox" value="linux" v-model="myCheck">linux</label>
      <p>チェックを入れた値：{{ myCheck }}</p>
    </div>

    <!-- Vue アプリケーション -->
    <script>
      const { createApp } = Vue;

      createApp({
        data: function(){
          return {
            myCheck: []
          };
        }
      }).mount('#app');
    </script>
  </body>
</html>

同意にチェックを入れるとボタンが有効になる

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="app">
      <p><label for="agree"><input id="agree" type="checkbox"v-model="myCheck">同意</label></p>
      <p><button v-bind:disabled="!myCheck">送信</button></p>
    </div>

    <!-- Vue アプリケーション -->
    <script>
      const { createApp } = Vue;

      createApp({
        data: function(){
          return {
            myCheck: false
          };
        }
      }).mount('#app');
    </script>
  </body>
</html>

ラジオボタンの値を取得

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="app">
      <label for="windows"><input id="windows" type="radio" value="windows" v-model="myCheck">windows</label>
      <label for="mac"><input id="mac" type="radio" value="mac" v-model="myCheck">mac</label>
      <label for="linux"><input id="linux" type="radio" value="linux" v-model="myCheck">linux</label>
      <p>チェックを入れた値：{{ myCheck }}</p>
    </div>

    <!-- Vue アプリケーション -->
    <script>
      const { createApp } = Vue;

      createApp({
        data: function(){
          return {
            myCheck: "windows"
          };
        }
      }).mount('#app');
    </script>
  </body>
</html>

myCheck: "windows"の値を、mac にするとデフォルトのチェック状態は mac にチェックが入った状態になります。

ラジオボタンで表示を切り替える

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="app">
      <label for="html"><input id="html" type="radio" value="/images/html.png" v-model="fileName">HTML</label>
      <label for="js"><input id="js" type="radio" value="/images/js.png" v-model="fileName">JavaScript</label>
      <label for="python"><input id="python" type="radio" value="/images/python.png" v-model="fileName">Python</label>
      <p>チェックを入れた画像：{{ fileName }}</p>
      <p><img v-bind:src="fileName"></p>
    </div>

    <!-- Vue アプリケーション -->
    <script>
      const { createApp } = Vue;

      createApp({
        data: function(){
          return {
            fileName: "/images/html.png"
          };
        }
      }).mount('#app');
    </script>
  </body>
</html>

セレクトメニューの値を取得する

選択された値を取得する

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="app">
      <select v-model="selectColor">
        <option value="" disabled>選択してください</option>
        <option value="red">赤</option>
        <option value="blue">青</option>
        <option value="yellow">黄色</option>
      </select>
      <p v-bind:style="{color: selectColor}">{{ selectColor }}</p>
      <p><img v-bind:src="fileName"></p>
    </div>

    <!-- Vue アプリケーション -->
    <script>
      const { createApp } = Vue;

      createApp({
        data: function(){
          return {
            selectColor: ""
          };
        }
      }).mount('#app');
    </script>
  </body>
</html>

selectColor: "red"とすると、red という文字が赤色で最初から表示されます。

複数の項目を選択する

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="app">
      <select v-model="selectColor" multiple>
        <option value="red">赤</option>
        <option value="blue">青</option>
        <option value="yellow">黄色</option>
      </select>
      <p v-bind:style="{color: selectColor}">{{ selectColor }}</p>
      <p><img v-bind:src="fileName"></p>
    </div>

    <!-- Vue アプリケーション -->
    <script>
      const { createApp } = Vue;

      createApp({
        data: function(){
          return {
            selectColor: []
          };
        }
      }).mount('#app');
    </script>
  </body>
</html>

セレクトメニューをCtr + クリックもしくは、Shift + クリックで複数選択できます。

修飾子

v-model には、修飾子をつけることで機能を追加することができます。

すべて入力が終わってから表示する

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="app">
      <p><input type="text" v-model.lazy="myText"></p>
      <p>{{ myText }}</p>
    </div>

    <!-- Vue アプリケーション -->
    <script>
      const { createApp } = Vue;

      createApp({
        data: function(){
          return {
            myText: ""
          };
        }
      }).mount('#app');
    </script>
  </body>
</html>

入力値を数字に置き換える

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="app">
      <p><input type="text" v-model.number="myText"></p>
      <p>{{ 100 + myText }}</p>
    </div>

    <!-- Vue アプリケーション -->
    <script>
      const { createApp } = Vue;

      createApp({
        data: function(){
          return {
            myText: ""
          };
        }
      }).mount('#app');
    </script>
  </body>
</html>

v-model.numberの.numberをのけると型が違うため足し算ではなく文字の連結になります。例えば100と入力すると100100と表示されます。

前後の空白を削除しする

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="app">
      <p><input type="text" v-model.trim="myText"></p>
      <p>{{ myText }}</p>
    </div>

    <!-- Vue アプリケーション -->
    <script>
      const { createApp } = Vue;

      createApp({
        data: function(){
          return {
            myText: ""
          };
        }
      }).mount('#app');
    </script>
  </body>
</html>

入力された最初と最後の空白が削除されます。入力された途中の半角の空白は表示されます。空白が連続して入力された場合は、一つだけ空白が表示されます。

全角の空白の場合は、最初と最後の空白は削除され、入力された値の途中の空白はすべて表示されます。