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

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

WBOY

リリース： 2023-06-11 10:19:40

オリジナル

3341 人が閲覧しました

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

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

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

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 要素で使用され、ユーザーが入力した名前が表示されます。

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

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 メソッドを使用して、選択した複数のチェックボックスの値を文字列に結合して表示しやすくする必要があります。

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

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 サイトの他の関連記事を参照してください。