基本用法

<!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 会在每个 input 事件之后同步输入的数据。你可以添加一个 lazy 特性，将其改变为在 change 事件之后才进行同步。

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

登入後複製

转换为数字

如果你希望将用户的输入自动转换为数字，你可以在 v-model 所在的 input 上添加一个 number 特性。没有试验成功，不知道什么原因

<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

登入後複製

动态select选项

当你需要为一个

Vue.JS入门篇处理表单_html/css_WEB-ITnose

基本用法

惰性更新

转换为数字

绑定表达式

动态select选项