十一、表单数据绑定v-model之复选框-单选-下拉框的使用

v-model用于绑定表单数据，该指令在表单input、textarea、select元素上创建双向数据绑定。

v-model指令忽略表单的初始值，如在单选按钮中设置默认选项是无效的。

<div id="app">
    <h2>多选</h2>
    <input type="checkbox" id="basketball" value="篮球" v-model="checkedSports">
    <label for="basketball">篮球</label>
    <input type="checkbox" id="football" value="足球" v-model="checkedSports">
    <label for="football">足球</label>
    <input type="checkbox" id="volleyball" value="排球" v-model="checkedSports">
    <label for="volleyball">排球</label>
    <br>
    <span>你的爱好是: {{ checkedSports }}</span>
    <hr>
    <h2>单选</h2>
    <input type="radio" id="man" value="man" v-model="person">
    <label for="man">男人</label>
    <br>
    <input type="radio" id="woman"  value="woman" v-model="person">
    <label for="woman">女人</label>
    <br>
    你是 {{ person }}
    <hr>
    <h2>下拉框</h2>
    <select v-model="selected">
        <option value="篮球">篮球</option>
        <option value="足球">足球</option>
        <option value="排球">排球</option>
    </select>
    你选择的是：{{ selected }}
    
   
</div>

<script>
    var app = new Vue({
        el:"#app",
        data:{
            // 使用数组接收多选的数据值
            checkedSports:[],
            person:'', // 若要初始化就选中一个值，
            // 则写入对应的值，如 persion:'man'
            selected:''
        }
    });
</script>

关于复选选，是一个数组形式的数据值，单选与单选下拉框其数据值是字符串形式。

表单修饰符

.lzay修饰符：默认情况下，使用v-model绑定的数据会实时输出，但是加上.lazy修饰符之后，只有当表单输入框失去焦点时才会修改v-model绑定的数据；

.number修饰符：默认情况下，表单输入框中的数据会被当作字符串处理，但是加上.number这后，输入的内容被当作数值处理；

.trim修饰符：删除内容两边的空格。

2020-12-02