Vue.js はフォーム コントロール バインディングを毎日学習する必要があります

基本的な使用法

v-model ディレクティブを使用して、フォーム コントロール要素に双方向のデータ バインディングを作成できます。コントロールの種類に応じて、要素を更新するための正しい方法が自動的に選択されます。ちょっと魔法のようですが、v-model はユーザー入力イベントのデータを更新し、特にいくつかのエッジケースを処理するための単なる構文糖です。

Text

<span>Message is: {{ message }}</span>
<br>
<input type="text" v-model="message" placeholder="edit me">

Checkbox

単一のチェックボックス、論理値:

<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>

同じ配列にバインドされた複数のチェックボックス:

<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames | json }}</span>

new Vue({
 el: '...',
 data: {
 checkedNames: []
 }
})

Radio

<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Picked: {{ picked }}</span>

選択

単一選択:

<select v-model="selected">
 <option selected>A</option>
 <option>B</option>
 <option>C</option>
</select>
<span>Selected: {{ selected }}</span>

複数選択 (配列にバインド):

<select v-model="selected" multiple>
 <option selected>A</option>
 <option>B</option>
 <option>C</option>
</select>
<br>
<span>Selected: {{ selected | json }}</span>

v-for でレンダリングされる動的オプション:

<select v-model="selected">
 <option v-for="option in options" v-bind:value="option.value">
 {{ option.text }}
 </option>
</select>
<span>Selected: {{ selected }}</span>

new Vue({
 el: '...',
 data: {
 selected: 'A',
 options: [
  { text: 'One', value: 'A' },
  { text: 'Two', value: 'B' },
  { text: 'Three', value: 'C' }
 ]
 }
})

バインド値

ラジオボタン、チェックボックス、ボックスのオプションを選択する場合、v-model にバインドされる値は通常、静的な文字列です (チェック ボックスの場合は論理値です):

<!-- 当选中时，`picked` 为字符串 "a" -->
<input type="radio" v-model="picked" value="a">
 
<!-- `toggle` 为 true 或 false -->
<input type="checkbox" v-model="toggle">
 
<!-- 当选中时，`selected` 为字符串 "abc" -->
<select v-model="selected">
 <option value="abc">ABC</option>
</select>

しかし、値を Vue インスタンスの動的な属性にバインドしたい場合もあります。 、v-bind を使用してこれを実現できます。この属性の値は文字列である必要はありません。

チェックボックス

<input
 type="checkbox"
 v-model="toggle"
 v-bind:true-value="a"
 v-bind:false-value="b">
 
// 当选中时
vm.toggle === vm.a
// 当没有选中时
vm.toggle === vm.b

ラジオ

<input type="radio" v-model="pick" v-bind:value="a">
 
// 当选中时
vm.pick === vm.a

オプションを選択

<select v-model="selected">
 <!-- 对象字面量 -->
 <option v-bind:value="{ number: 123 }">123</option>
</select>
 
// 当选中时
typeof vm.selected // -> &#39;object&#39;
vm.selected.number // -> 123

パラメータ機能

lazy

デフォルトでは、 v-model は、入力イベントの入力ボックスの値を次のように同期します。データの場合、変更イベントで同期する遅延属性を追加できます:

a2ec127e2dfafec885b1a280e2a1407e
47e7eab6c6aca66cc1d3b68f456496eb

number

ユーザーの入力を自動的に Number 型に変換したい場合 (元の値の変換結果が NaN の場合は元の値を返す)、特徴番号を追加できます:

e4e6eb16a62c8b6a77731a7c0b2080cf

debounce

debounce 各タップ後に入力ボックスの値とデータを同期するための最小遅延を設定します。これは、更新ごとに負荷の高い操作 (入力プロンプトでの Ajax リクエストなど) が必要な場合に便利です。

82ddc4b28363de60a9d851e978fbb3a6

debounce パラメータは入力イベントを遅らせるものではないことに注意してください。基礎となるデータの「書き込み」を遅らせます。したがって、デバウンスを使用する場合は、データ変更に応答するために vm.$watch() を使用する必要があります。 DOM イベントを遅延させたい場合は、デバウンス フィルターを使用する必要があります。

以上がこの記事の全内容です。皆さんの学習に役立つことを願っています。また、PHP 中国語 Web サイトにアクセスしていただければ幸いです。

Vue.js で毎日学習する必要があるフォーム コントロール バインディングに関連するその他の記事については、PHP 中国語 Web サイトに注目してください。