Vue中获取各类型input标签的值

比眉伴天荒 2023-10-07 20:25 128阅读 0赞

HTML中input标签的tyle类型实际上有23种；常用的有text、password、radio、checkbox、button、file。现在就在Vue中获取常用的值

获取text类型的值

//html  
<input type="text" v-model="val">  
//js  
console.log(this.val);  
  
获取password类型的值

//html  
<input type="password" v-model="val">  
//js  
console.log(this.val);  
  
获取color类型的值

//html  
<input type="color" v-model="val">  
//js  
console.log(this.val);  
  
获取file类型的值,文件上传不能使用v-model获取到文件，要使用change事件选择文件后才能获取，且文件位置是e.target.files\[0\]

//html  
<input type="file" @change="upload($event)" name="filename">  
//js  
upload(e)\{  
console.log(e.target.files\[0\]);  
\}  
  
获取radio类型的值,单选框必须要有value属性定义的值，且如果是多个单选框，那么name属性必须一样

//html  
<input type="radio" name="radio\_v" value="radios\_1" v-model="val">one  
<input type="radio" name="radio\_v" value="radios\_2" v-model="val">two  
//js  
console.log(this.val);  
  
获取checkbox类型的值，复选框的值只有布尔类型的——true、false；选中的时候为true，未选中情况下为false

//html  
<input type="checkbox" v-model="val">one  
//js  
console.log(this.val);  
  
获取select类型的值，下拉框

//html  
<select v-model="val">  
<option value="options1">options1</option>  
<option value="options2">options2</option>  
<option value="options3">options3</option>  
</select>  
//js  
console.log(this.val);//获取的是value  
  
获取range类型的值，滑动框，值是从0——100

//html  
<input type="range" v-model="val">  
//js  
console.log(this.val);  
  
获取date类型的值，日期选择框，其他时间选择器有week、month、datetime-local、datetime、time

//html  
<input type="datetime-local" v-model="val">  
//js  
console.log(this.val);  
![0d8fbddfa366451da15c70bf4c1272d1.png][]  
获取number类型的值，有限制的输入框还有email、url、search、tel

//html  
<input type="number" v-model="val">  
//js  
console.log(this.val);

Tips：a标签的href属性，开头加上tel:即可使用电话拨号;例如

[0d8fbddfa366451da15c70bf4c1272d1.png]: https://img-blog.csdnimg.cn/0d8fbddfa366451da15c70bf4c1272d1.png