Vue input格式化展示
Vue input格式化展示computedv-model.trimiView inputNumber formattercomputed需要输入或粘贴一段内容到输入框,移除所有空格输入手机号: 139 1234 5678显示:13912345678值:13912345678输入邮箱后缀同理输入:someone显示:someone@163.com使用vue计算属性的getter和setterhtt
·
Vue input格式化展示
computed
需要输入或粘贴一段内容到输入框,移除所有空格
输入手机号: 139 1234 5678
显示:13912345678
值:13912345678
输入邮箱后缀同理
输入:someone
显示:someone@163.com
使用vue计算属性的getter和setter
https://cn.vuejs.org/v2/guide/computed.html
<Input style="width:150px" clearable v-model="phoneNumber"></Input>
<script>
export default {
data () {
return {
info: {
phoneNumber: ''
},
}
},
computed: {
phoneNumber: {
get () {
return this.info.phoneNumber.replace(/\s/g, '')
},
set (val) {
this.info.phoneNumber = val.replace(/\s/g, '')
}
}
}
}
</script>
v-model.trim
//去除首尾空格
<input type = "text" v-model.trim="message">
iView inputNumber formatter
iView的inputNumber组件提供了formatter和parser属性来格式化数据
https://www.iviewui.com/components/input-number
输入:1
显示:1 s
值:1
<InputNumber class="input-style" v-model="procedure.timeout"
placeholder="Please enter the execute timeout" type="number" :min="1"
:formatter="value => `${value} S`" :parser="value => value.replace(' S', '')">
</InputNumber>
更多推荐
已为社区贡献1条内容
所有评论(0)