博客

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);

获取number类型的值

，有限制的输入框还有email、url、search、tel

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

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

<a href="tel:00000000000">电话</a>