v-model を使用して Vue でフォームの双方向バインディングを実装する方法

Vue は人気があり、習得しやすいフロントエンド フレームワークであり、その双方向バインディングはフォーム処理に非常に便利です。 Vue では、v-model ディレクティブを使用して、フォーム要素と Vue コンポーネント データ属性の間の双方向バインディングを実現します。以下では、v-modelを使用してVueでフォームの双方向バインディングを実装する方法を詳しく紹介します。

1. v-model ディレクティブについて理解する

v-model ディレクティブは、Vue の双方向データ バインディングのための重要なディレクティブの 1 つです。 v-model は、フォーム入力とアプリケーション状態の間の双方向のバインド関係を確立するために使用されます。入力ボックスの変更を監視し、コンポーネントのプロパティの変更を入力ボックスに反映することもできます。フォーム処理では、双方向バインディングによりフォーム処理プロセスが簡素化され、データの保守と管理が容易になります。

2. v-model を使用してテキスト ボックスを処理する

v-model はほとんどのフォーム要素を処理できますが、その中で最も一般的なのはテキスト ボックスです。 v-model を使用したテキスト ボックスの処理は非常に簡単で、v-model ディレクティブをテキスト ボックス要素に追加し、それを Vue コンポーネントの data 属性にバインドするだけです。たとえば、次のコードは、v-model を使用してテキスト ボックスを処理する方法を示しています。

<template>
   <div>
       <label>输入名称：</label>
       <input v-model="name">
       <p>您输入的名称是：{{name}}</p>
   </div>
</template>
<script>
   export default {
       data() {
           return {
               name: ''
           }
       }
   }
</script>

上記のコードでは、v-model ディレクティブが入力要素に追加され、それを と接続していることがわかります。 Vue コンポーネント name 属性は双方向のバインディングを実行します。 Vue コンポーネントでは、入力ボックスの値を保存するための name 属性を定義します。同時に、テンプレート文字列 {{name}} が p 要素で使用され、ユーザーが入力した名前が表示されます。

3. ラジオ ボタンとチェック ボックスの処理

Vue では、v-model を使用してラジオ ボタンとチェック ボックスを簡単に処理できます。ラジオ ボタンの場合、v-model ディレクティブを使用して、コンポーネントにブール属性を定義して、ラジオ ボタンの selected 属性との双方向バインディングを行うことができます。チェック ボックスの場合、v-model ディレクティブを使用して、チェック ボックスの value 属性との双方向バインディング用のコンポーネント内の配列型属性を定義できます。次のコードは、ラジオ ボタンとチェック ボックスの処理方法を示しています。

<template>
   <div>
       <label>请选择性别：</label>
       <input type="radio" v-model="gender" value="male">男
       <input type="radio" v-model="gender" value="female">女
       <p>您选择的性别是：{{gender}}</p>
 
       <label>请选择您的爱好：</label>
       <input type="checkbox" v-model="hobbies" value="reading">阅读
       <input type="checkbox" v-model="hobbies" value="traveling">旅行
       <input type="checkbox" v-model="hobbies" value="music">音乐
       <p>您选择的爱好是：{{hobbies.join(',')}}</p>
   </div>
</template>
<script>
   export default {
       data() {
           return {
               gender: '',
               hobbies: []
           }
       }
   }
</script>

上記のコードでは、ラジオ ボタンとチェック ボックスについては、 v-model ディレクティブを使用するだけで済みます。 Vue コンポーネントのデータ プロパティに双方向にバインドされます。 Vue コンポーネントでは、ユーザーが選択した性別と趣味を保存するために、性別と趣味という 2 つの属性を定義します。ユーザーが選択した性別を表示するには、{{gender}} を使用します。趣味を表示する場合は、配列の join メソッドを使用して、選択した複数のチェック ボックスの値を文字列に結合して表示しやすくする必要があります。

4. ドロップダウン リスト ボックスの処理

Vue で v-model ディレクティブを使用してドロップダウン リスト ボックスを双方向にバインドすることも非常に簡単です。 v-model ディレクティブを select 要素に追加し、それを Vue コンポーネントのデータ属性に双方向にバインドするだけです。 Vue コンポーネントでは、ドロップダウン ボックスで現在選択されている項目の値を保存するプロパティを定義する必要があります。次のコードは、v-model を使用してドロップダウン リスト ボックスを処理する方法を示しています。

<template>
   <div>
       <label>请选择您所在的城市：</label>
       <select v-model="city">
           <option value="beijing">北京</option>
           <option value="shanghai">上海</option>
           <option value="guangzhou">广州</option>
           <option value="shenzhen">深圳</option>
       </select>
       <p>您所在的城市是：{{city}}</p>
   </div>
</template>
<script>
   export default {
       data() {
           return {
               city: ''
           }
       }
   }
</script>

上記のコードでは、v-model ディレクティブが select 要素に追加され、それを select 要素に接続していることがわかります。 city 属性は双方向のバインディングを実行します。 Vue コンポーネントでは、ドロップダウン リスト ボックスで現在選択されている項目の値を保存するために city プロパティが使用されます。最後に、{{city}} を使用して、ユーザーが選択した都市を表示します。

概要

この記事では、v-model を使用して Vue でフォームの双方向バインディングを実装する方法を紹介します。 Vue では、v-model ディレクティブを使用して、さまざまなフォーム要素の双方向バインディングを簡単に処理できます。 v-model ディレクティブを使用してフォーム要素を Vue コンポーネント プロパティにバインドし、フォーム入力中にコンポーネント プロパティ値を自動的に更新できます。この方法により、開発者がフォーム データを処理するプロセスが簡素化され、開発効率が向上します。

以上がv-model を使用して Vue でフォームの双方向バインディングを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。