11、表单数据绑定v-model之复选框与单选的使用

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

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

<span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"><</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">div</span> <span style="box-sizing: border-box;color: rgb(255, 203, 107)">id</span>=<span style="box-sizing: border-box;color: rgb(195, 232, 141)">"app"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"><</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">h2</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span>多选<span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"></</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">h2</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"><</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">input</span> <span style="box-sizing: border-box;color: rgb(255, 203, 107)">type</span>=<span style="box-sizing: border-box;color: rgb(195, 232, 141)">"checkbox"</span> <span style="box-sizing: border-box;color: rgb(255, 203, 107)">id</span>=<span style="box-sizing: border-box;color: rgb(195, 232, 141)">"basketball"</span> <span style="box-sizing: border-box;color: rgb(255, 203, 107)">value</span>=<span style="box-sizing: border-box;color: rgb(195, 232, 141)">"篮球"</span> <span style="box-sizing: border-box;color: rgb(255, 203, 107)">v-model</span>=<span style="box-sizing: border-box;color: rgb(195, 232, 141)">"checkedSports"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"><</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">label</span> <span style="box-sizing: border-box;color: rgb(255, 203, 107)">for</span>=<span style="box-sizing: border-box;color: rgb(195, 232, 141)">"basketball"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span>篮球<span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"></</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">label</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"><</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">input</span> <span style="box-sizing: border-box;color: rgb(255, 203, 107)">type</span>=<span style="box-sizing: border-box;color: rgb(195, 232, 141)">"checkbox"</span> <span style="box-sizing: border-box;color: rgb(255, 203, 107)">id</span>=<span style="box-sizing: border-box;color: rgb(195, 232, 141)">"football"</span> <span style="box-sizing: border-box;color: rgb(255, 203, 107)">value</span>=<span style="box-sizing: border-box;color: rgb(195, 232, 141)">"足球"</span> <span style="box-sizing: border-box;color: rgb(255, 203, 107)">v-model</span>=<span style="box-sizing: border-box;color: rgb(195, 232, 141)">"checkedSports"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"><</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">label</span> <span style="box-sizing: border-box;color: rgb(255, 203, 107)">for</span>=<span style="box-sizing: border-box;color: rgb(195, 232, 141)">"football"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span>足球<span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"></</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">label</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"><</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">input</span> <span style="box-sizing: border-box;color: rgb(255, 203, 107)">type</span>=<span style="box-sizing: border-box;color: rgb(195, 232, 141)">"checkbox"</span> <span style="box-sizing: border-box;color: rgb(255, 203, 107)">id</span>=<span style="box-sizing: border-box;color: rgb(195, 232, 141)">"volleyball"</span> <span style="box-sizing: border-box;color: rgb(255, 203, 107)">value</span>=<span style="box-sizing: border-box;color: rgb(195, 232, 141)">"排球"</span> <span style="box-sizing: border-box;color: rgb(255, 203, 107)">v-model</span>=<span style="box-sizing: border-box;color: rgb(195, 232, 141)">"checkedSports"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"><</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">label</span> <span style="box-sizing: border-box;color: rgb(255, 203, 107)">for</span>=<span style="box-sizing: border-box;color: rgb(195, 232, 141)">"volleyball"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span>排球<span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"></</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">label</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"><</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">br</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"><</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">span</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span>你的爱好是: {{ checkedSports }}<span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"></</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">span</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"><</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">hr</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"><</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">h2</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span>单选<span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"></</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">h2</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"><</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">input</span> <span style="box-sizing: border-box;color: rgb(255, 203, 107)">type</span>=<span style="box-sizing: border-box;color: rgb(195, 232, 141)">"radio"</span> <span style="box-sizing: border-box;color: rgb(255, 203, 107)">id</span>=<span style="box-sizing: border-box;color: rgb(195, 232, 141)">"man"</span> <span style="box-sizing: border-box;color: rgb(255, 203, 107)">value</span>=<span style="box-sizing: border-box;color: rgb(195, 232, 141)">"man"</span> <span style="box-sizing: border-box;color: rgb(255, 203, 107)">v-model</span>=<span style="box-sizing: border-box;color: rgb(195, 232, 141)">"person"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"><</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">label</span> <span style="box-sizing: border-box;color: rgb(255, 203, 107)">for</span>=<span style="box-sizing: border-box;color: rgb(195, 232, 141)">"man"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span>男人<span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"></</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">label</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"><</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">br</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"><</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">input</span> <span style="box-sizing: border-box;color: rgb(255, 203, 107)">type</span>=<span style="box-sizing: border-box;color: rgb(195, 232, 141)">"radio"</span> <span style="box-sizing: border-box;color: rgb(255, 203, 107)">id</span>=<span style="box-sizing: border-box;color: rgb(195, 232, 141)">"woman"</span>  <span style="box-sizing: border-box;color: rgb(255, 203, 107)">value</span>=<span style="box-sizing: border-box;color: rgb(195, 232, 141)">"woman"</span> <span style="box-sizing: border-box;color: rgb(255, 203, 107)">v-model</span>=<span style="box-sizing: border-box;color: rgb(195, 232, 141)">"person"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"><</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">label</span> <span style="box-sizing: border-box;color: rgb(255, 203, 107)">for</span>=<span style="box-sizing: border-box;color: rgb(195, 232, 141)">"woman"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span>女人<span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"></</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">label</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"><</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">br</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    你是 {{ person }}</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"><</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">hr</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"><</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">h2</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span>下拉框<span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"></</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">h2</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"><</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">select</span> <span style="box-sizing: border-box;color: rgb(255, 203, 107)">v-model</span>=<span style="box-sizing: border-box;color: rgb(195, 232, 141)">"selected"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"><</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">option</span> <span style="box-sizing: border-box;color: rgb(255, 203, 107)">value</span>=<span style="box-sizing: border-box;color: rgb(195, 232, 141)">"篮球"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span>篮球<span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"></</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">option</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"><</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">option</span> <span style="box-sizing: border-box;color: rgb(255, 203, 107)">value</span>=<span style="box-sizing: border-box;color: rgb(195, 232, 141)">"足球"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span>足球<span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"></</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">option</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"><</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">option</span> <span style="box-sizing: border-box;color: rgb(255, 203, 107)">value</span>=<span style="box-sizing: border-box;color: rgb(195, 232, 141)">"排球"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span>排球<span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"></</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">option</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"></</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">select</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    你选择的是：{{ selected }}</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"></</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">div</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"><</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">script</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(199, 146, 234)">var</span> <span style="box-sizing: border-box">app</span> <span style="box-sizing: border-box">=</span> <span style="box-sizing: border-box;color: rgb(199, 146, 234)">new</span> <span style="box-sizing: border-box;color: rgb(130, 177, 255)">Vue</span>({</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(128, 203, 174)">el</span>:<span style="box-sizing: border-box;color: rgb(195, 232, 141)">"#app"</span>,</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(128, 203, 174)">data</span>:{</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(84, 110, 122)">// 使用数组接收多选的数据值</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(128, 203, 174)">checkedSports</span>:[],</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(128, 203, 174)">person</span>:<span style="box-sizing: border-box;color: rgb(195, 232, 141)">''</span>, <span style="box-sizing: border-box;color: rgb(84, 110, 122)">// 若要初始化就选中一个值，</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(84, 110, 122)">// 则写入对应的值，如 persion:'man'</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(128, 203, 174)">selected</span>:<span style="box-sizing: border-box;color: rgb(195, 232, 141)">''</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        }</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    });</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"></</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">script</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span>

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

表单修饰符

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

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

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

我是小白，期待和优秀的你一起同行!

小白

2020年12月02日