小白学习Vue(?)--v-model在表单中的使用

1. v-model指令:

v-model 指令在表单<input>、<textarea> 及 <select> 元素上创建双向数据绑定

v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源

本文只讨论v-model在普通dom标签上的使用，关于自定义组件的model选项，可以查看model选项介绍

1.1. <input>文本框中使用:

<div id="test-modelNormal-input">
    <span>name: {{name}}</span><br/>
    <input v-model="name" value="abc"><br/>
    <!--name: zhangsan-->
    <!--忽略表单元素的 value的初始值'abc',而是将 Vue 实例的数据作为数据来源-->
</div>

<script>
    new Vue({
        el: '#test-modelNormal-input',
        data: {
            name: 'zhangsan'
        }
    });
</script>

1.2. <textarea>中使用:

使用上和<input>文本框的使用类似

<div id="test-modelNormal-textarea">
    <span>Multiline message is:</span>
    <p style="white-space: pre-line;">{{ message }}</p><br/>
    <textarea v-model="message" value="abc" placeholder="add multiple lines"></textarea><br/>
</div>

<script>
    new Vue({
        el: '#test-modelNormal-textarea',
        data: {
            message: ''
        }
    });
</script>

1.3. <input>复选框中使用:

单个复选框时，v-model绑定的值是boolean，复选框勾选时，会改变绑定的值，

<div id="test-modelNormal-checkbox">
    <input type="checkbox" id="checkbox" v-model="checked">
    <span>{{checked}}</span><br/>
</div>

<script>
    new Vue({
        el: '#test-modelNormal-checkbox',
        data: {
            checked: false
        }
    });
</script>

多个复选框时，v-model要绑定数组；勾选时，勾选的值会添加到数组里；取消勾选则移除数组对应的值

<div id="test-modelNormal-checkboxs">
    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">Jack</input>
    <input type="checkbox" id="john" value="John" v-model="checkedNames">John</input>
    <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">Mike</input><br/>
    <span>Checked names: {{ checkedNames }}</span>
</div>

<script>
    new Vue({
        el: '#test-modelNormal-checkboxs',
        data: {
            checkedNames: []
        }
    });
</script>

1.4. <input>单选框中使用:

勾选时，改变属性值为对应value值

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

<script>
    new Vue({
        el: '#test-modelNormal-radio',
        data: {
            picked: ''
        }
    });
</script>

1.4. <select>选择框中使用:

单选时，绑定字符串；多选时，绑定数组

<div id="test-modelNormal-selected">
    <select v-model="selected">
        <option disabled value="">请选择</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <span>Selected: {{ selected }}</span>
</div>

<script>
    new Vue({
        el: '#test-modelNormal-selected',
        data: {
            selected: ''
            //selected: []
        }
    });
</script>

以上例子参考vue官网