基本的な使用法

<!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

ログイン後にコピー

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

基本的な使用法

遅延更新

数値に変換

式のバインド

動的選択オプション