表单输入绑定

双向绑定……保证了每一个form控件在内存中都有一个记录变量与之对应，这种对应是双向的，不管是ajax请求对内存中变量的操作，还是视图发生了改变，都会对相应的值进行更新。

使用v-model指令可以轻易做到这些。

简单的小例子：

    <!-- 单行文本绑定 -->
    <div id="vm1">
        <input v-model="message" placeholder="edit me">
        <p>Message is: {{ message }}</p>
    </div>

    <script type="text/javascript">
        var vm1 = new Vue({
            el: '#vm1',
            data: {
                message: ""
            }
        })
    </script>

渲染结果

随着输入的值不断变化

对于多行文本，v-model也有出色的效果，当然需要有一些改变。

    <!-- 多行文本绑定 -->
    <div id="vm2">
        <span>Multiline message is:</span>
        <p style="white-space: pre-line;">{{ message }}</p>
        <!-- 由于textarea元素的特殊性，请用v-model绑定 -->
        <textarea v-model="message" placeholder="add multiple lines"></textarea>
    </div>

    <script type="text/javascript">
        var vm2 = new Vue({
            el: '#vm2',
            data: {
                message: ""
            }

        })
    </script>

虽然<textarea>是个双标记，但这也不意味着你就可以把绑定写在两个标记之中。

输入前

输入后

对于复选框，可以将布尔值绑定到控件上，甚至可以直接初始化。

    <!-- 复选框绑定到布尔值 -->
    <div id="vm3">
        <input type="checkbox" id="checkbox" v-model="checked">
        <label for="checkbox">{{ checked }}</label>
    </div>

    <script type="text/javascript">
        var vm3 = new Vue({
            el: '#vm3',
            data: {
                checked: true
            }
        })
    </script>

初始化的true值

通过取消选中改变值

多个复选框，我们也可以把它的值绑定到数组上去。


    <div id="vm4">
        <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="jack">mike</label>

        <br>
        <span>Checked names: {{ checkedNames }}</span>
    </div>


    <script type="text/javascript">
        var vm4 = new Vue({
            el: '#vm4',
            data: {
                checkedNames: []
            }
        })
    </script>

选中的元素即与数组中一一对应

单选按钮貌似用一个变量就能搞定

    <!-- 单选按钮 -->
    <div id="vm5">
        <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>
    </div>

    <script type="text/javascript">
        var vm5 = new Vue({
            el: '#vm5',
            data: {
                picked: ''
            }
        })
    </script>

会显示选中的值

还有关于下拉列表框的两种形式，单选和多选。

单选

    <!-- 我们也可以禁用其中的选项来添加描述性文本 -->
    <div id="vm6">
        <select v-model="selected">
            <option disabled value="">请选择</option>
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>
        <span>Selected: {{ selected }}</span>
    </div>

    <script type="text/javascript">
        var vm6 = new Vue({
            el: '#vm6',
            data: {
                selected: ''
            }
        })
    </script>

单选

多选


    <div id="vm7">
      <select v-model="selected" multiple style="width: 50px;">
        <option>A</option>
        <option>B</option>
        <option>C</option>
      </select>
      <br>
      <span>Selected: {{ selected }}</span>
    </div>

    <script type="text/javascript">
        var vm7 = new Vue({
            el: '#vm7',
            data: {
                selected: []
            }
        })      
    </script>

多选绑定到数组

当然，对于<select>中的选项，使用v-for渲染代码量更低一些。

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

    <script type="text/javascript">
        // 在data中预先确定默认选中的值
        var vm8 = new Vue({
          el: '#vm8',
          data: {
            selected: 'A',
            options: [
              { text: 'One', value: 'A' },
              { text: 'Two', value: 'B' },
              { text: 'Three', value: 'C' }
            ]
          }
        })
    </script>

依然能够拿出选择的值

对其中一些绑定的说明：


    <!-- 当选中时，`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>

        <input type="checkbox" v-model="toggle" true-value="yes" false-value="no">
        <!--    // 当选中时
        vm.toggle === 'yes'
        // 当没有选中时
        vm.toggle === 'no' -->
    <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 // => 'object'
    vm.selected.number // => 123 -->

最后是一些动作标记：

    <!-- 在“change”时而非“input”时更新 -->
    <input v-model.lazy="msg">

    <!-- 自动转数字 -->
    <input v-model.number="age" type="number">

    <!-- 自动去除前后空格 -->
    <input v-model.trim="msg">