编辑
2023-04-05
VUE3
0
请注意,本文编写于 619 天前,最后修改于 610 天前,其中某些信息可能已经过时。

目录

说明
普通情况
特殊情况
单个复选框
多个复选框
单选框
下拉选择框

说明

通过v-model实现双向绑定

普通情况

对于单个文本输入框或者文本域都是直接绑定对于值

<p{{ msg }}</p> <input v-model="msg" placeholder="占位符" /> <textarea v-model="msg" placeholder="占位符"></textarea>

特殊情况

单个复选框

绑定的是布尔值

vue
<input type="checkbox" id="checkbox" v-model="checkedType" />

多个复选框

绑定的是由多个value值构成的数组

vue
<input type="checkbox" value='0' id="checkbox" v-model="checkedArray" /> <input type="checkbox" value='1' id="checkbox" v-model="checkedArray" /> <input type="checkbox" value='2' id="checkbox" v-model="checkedArray" /> /* checkedArray:[0,1,2] */

单选框

直接绑定到值

vue
<input type="radio" id="two" value="0" v-model="typesValue" />

下拉选择框

直接绑定到值

<select v-model="selectedValue"> <option disabled value="">X</option> <option>A</option> <option>B</option> <option>C</option> </select>

本文作者:RKLS

本文链接:

版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!