Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题

2020-06-16 05:44:54易采站长站整理

    当多选按钮没写value值时,在 vue.js 中将值赋为null。

    vue.js对于复选按钮如何取值取决于 v-model 绑定的变量的类型。

1、基本类型

    初始化时,v-model 绑定的是任意的基本类型(Number、String、Boolean、Null、Undefined),取值时会默认转为Boolean类型,true时表示选中,false表示未选中。

js段代码:


window.onload = function (){
new Vue({
el:"#app",
data:{
hobbies01:"",
hobbies02:"...",
hobbies03:false
}
});
}

html段代码:


<body>
<div id="app">
<!-- v-model 绑定的是基本类型 -->
<input type="checkbox" name="hobbies" id="box01" value="敲代码" v-model="hobbies01">
<label for="box01">敲代码</label>
<input type="checkbox" name="hobbies" id="box02" value="写代码" v-model="hobbies02">
<label for="box02">写代码</label>
<input type="checkbox" name="hobbies" id="box03" value="撸代码" v-model="hobbies03">
<label for="box03">撸代码</label>
<hr/>
</div>
</body>

效果截图:

    初始化时,hobbies01值为空字符串转化为Boolean类型时false,所以未选中;hobbies02值为字符串“….”,转化为Boolean类型是true,所以默认选中;hobbies03默认值是false,所以初始化时未选中。

    此后,每次点击多选按钮,hobbies01、hobbies02、hobbies03的值都是 true | false 变化。

2、数组

    初始化时,v-model 绑定的变量是数组类型时。vue 认为这个复选按钮是用于获取值,会以选择(鼠标点击)的顺序将对应的值写入到数组中。

js代码段:


window.onload = function (){
new Vue({
el:"#app",
data:{
hobbies:[] }
});
}

html代码段:


<body>
<div id="app">
<!-- v-model 绑定时数组 -->
<input type="checkbox" name="hobbies" id="box01" value="敲代码" v-model="hobbies">
<label for="box01">敲代码</label>
<input type="checkbox" name="hobbies" id="box02" value="写代码" v-model="hobbies">
<label for="box02">写代码</label>
<input type="checkbox" name="hobbies" id="box03" value="撸代码" v-model="hobbies">
<label for="box03">撸代码</label>
</div>
</body>