ホームページ >ウェブフロントエンド >htmlチュートリアル >Vue.JS 処理入門 Forms_html/css_WEB-ITnose

Vue.JS 処理入門 Forms_html/css_WEB-ITnose

WBOYオリジナル: 2016-06-21 09:00:261478ブラウズ

基本的な使用法

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <script src="http://cdnjs.cloudflare.com/ajax/libs/vue/0.12.16/vue.min.js"></script></head><body><form id="demo">    <!-- text -->    <p>        <input type="text" v-model="msg">        {{msg}}    </p>    <!-- checkbox -->    <p>        <input type="checkbox" v-model="checked">        {{checked ? "yes" : "no"}}    </p>    <!-- radio buttons -->    <p>        <input type="radio" name="picked" value="one" v-model="picked">        <input type="radio" name="picked" value="two" v-model="picked">        {{picked}}    </p>    <!-- select -->    <p>        <select v-model="selected">            <option>one</option>            <option>two</option>        </select>        {{selected}}    </p>    <!-- multiple select -->    <p>        <select v-model="multiSelect" multiple>            <option>one</option>            <option>two</option>            <option>three</option>        </select>        {{multiSelect}}    </p>    <p><pre class="brush:php;toolbar:false">data: {{$data | json 2}}

遅延更新

デフォルトでは、v-model は各入力イベントの後に入力データを同期します。遅延属性を追加して、変更イベントの後にのみ同期するように変更できます。

<!-- 在 "change" 而不是 "input" 事件触发后进行同步 --><input v-model="msg" lazy>

数値に変換

ユーザーの入力を数値に自動的に変換したい場合は、v-model が配置されている入力に数値属性を追加できます。 テストは成功しませんでした。理由はわかりません

<input v-model="age" number>

式のバインド

ラジオボタンとチェックボックスで v-model を使用すると、バインドされます。指定された値はブール値または文字列です。

<!-- toggle 是 true 或 false --><input type="checkbox" v-model="toggle"><!-- 当单选框被选中时 pick 是 "red" --><input type="radio" v-model="pick" value="red">

ここにはわずかな制限があります。場合によっては、その背後にある値を他の値にバインドしたいことがあります。次のように実装できます:

チェックボックス

<input type="checkbox" v-model="toggle" true-exp="a" false-exp="b">

// 被选中时：vm.toggle === vm.a// 被取消选中时：vm.toggle === vm.b

ラジオボタン

<input type="radio" v-model="pick" exp="a">

// 被选中时：vm.pick === vm.a

動的選択オプション

221f08282418e2996498697df914ce4e 要素のリストオプションを動的にレンダリングする必要がある場合は、v-model ディレクティブと組み合わせて options 属性を使用することをお勧めします。次のように、オプションが動的に変更された場合、v-model は正しく同期します。

<select v-model="selected" options="myOptions"></select>

データでは、myOptions はオプション配列を指すパスまたは式である必要があります。このオプションの配列には、単純な配列

options = ['a', 'b', 'c']

を含めることも、{text:'', value:''} 形式のオブジェクトを含めることもできます。このオブジェクト形式を使用すると、テキストが基になる値とは異なる方法で表示されるようにオプションを設定できます。

options = [  { text: 'A', value: 'a' },  { text: 'B', value: 'b' }]

は

<select>  <option value="a">A</option>  <option value="b">B</option></select>

としてレンダリングされます。 options Groupさらに、配列内のオブジェクトの形式を {label:'', options:[...]} にすることもできます。このようなデータは 5b7a15bed8615d1b843806256bebea72 にレンダリングされます:

[{ label: 'A', options: ['a', 'b']},{ label: 'B', options: ['c', 'd']}]

<select><optgroup label="A"> <option value="a">a</option> <option value="b">b</option></optgroup><optgroup label="B"> <option value="c">c</option> <option value="d">d</option></optgroup></select>

オプションフィルタリング元のデータは、ここで必要とされる形式ではない可能性が高くなります。したがって、オプションを動的に生成する場合は、何らかのデータ変換を行う必要があります。この変換を簡素化するために、options 属性はフィルターをサポートしています。一般に、データ変換ロジックを再利用可能な カスタムフィルター に作成することをお勧めします。
```
Vue.filter('extract', function (value, keyToExtract) {return value.map(function (item) { return item[keyToExtract]})})
```
```
<selectv-model="selectedUser"options="users | extract 'name'"></select>
```
上記のフィルターは [{ name: 'Bruce' } , { name: 'Chuck' }] このような生データは ['Bruce', 'Chuck'] に変換されるため、動的オプションの形式要件に準拠します。
静的デフォルトオプション動的に生成されるオプションに加えて、静的デフォルトオプションも提供できます:
```
<select v-model="selectedUser" options="users"><option value="">Select a user...</option></select>
```
ユーザーに基づいて動的生成されたオプションは、この静的オプションに追加されます。 v-model の境界値が 0 以外のダミー値の場合、このデフォルトオプションが自動的に選択されます。

入力デバウンス

デバウンス機能を使用すると、各ユーザーイベントの後、入力がモデルに同期されるまで待機する遅延を設定できます。この遅延が期限切れになる前にユーザーが再度入力した場合、更新はすぐにはトリガーされませんが、遅延の待ち時間はリセットされます。これは、ajax ベースのオートコンプリート機能など、各更新の前に重労働を実行する場合に便利です。 無駄な重複送信を効果的に削減します

<input v-model="msg" debounce="500">

デバウンスパラメーターはユーザー入力イベントをデバウンスしないことに注意してください。基になるデータの「書き込み」操作でのみ機能します。したがって、デバウンスを使用する場合は、データ変更に応答するために v-on の代わりに vm.$watch() を使用する必要があります。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：文字と漢字は折り返すことができますが、句読点は折り返すことができません_html/css_WEB-ITnose次の記事：文字と漢字は折り返すことができますが、句読点は折り返すことができません_html/css_WEB-ITnose

続きを見る