Vue 学习随笔系列十一 -- input输入框和select下拉框使用
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue

·
input输入框和select下拉框
文章目录
一、input输入框
1、只能输入整数
<el-input onkeypress="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')">
2、可以输入带小数点的数字
<el-input onkeypress="if(isNaN(value))execCommand('undo')" onafterpaste="if(isNaN(value))execCommand('undo')">
<input name=txt1 onchange="if(/\D/.test(this.value)){alert('只能输入数字');this.value='';}">
3、可以输入数字和字母包括特殊字符
<el-input
oninput="if(value.length>50)value=value.slice(0,50)"
οnkeyup="value=value.replace(/[^\w\.\/]/ig,'')"
>
</el-input>
4、只能输入字母和汉字
<el-input
onkeyup="value=value.replace(/[\d]/g,'')"
onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[\d]/g,''))"
>
</el-input>
5、只能输入数字和英文
<el-input
onkeyup="value=value.replace(/[^\w\.\/]/ig,'')"
>
</el-input>
6、不能输入以0开始的数字
<el-input
onkeyup="value=value.replace(/[^\d]/g, '').replace(/^0{1,}/g,'')"
>
</el-input>
二、select下拉框
1、select下拉框内容可以选中,但不展示解决办法
<el-select
v-model="form.xxx"
class="width-full"
@change="handleChange"
>
<el-option
v-for="item in List"
:key="item.code"
:label="item.name"
:value="item.code"
></el-option>
</el-select>
handleChange(val){
// console.log(111, val)
if (val) {
this.$set(this.dataForm, this.dataForm.xxx, val)
} else {
this.$set(this.dataForm, this.dataForm.xxx, '')
}
}




vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:20 天前 )
9e887079
[skip ci] 11 个月前
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 1 年前
更多推荐
所有评论(0)