vue中如何实时修改输入的值

vue中如何实时修改输入的值

经常看到需要对用户输入的值进行实时修改,有时是需要修改为指定的展示内容,有时候是用来校验,禁止用户输入非法数据,总之是一个常见的需求吧,只是自己一直没有特意去关注。思来想去还是有必要了解一下。

操作方法

一直听说各种方式,记得最深的便是利用computed的计算属性,通过setget 来进行修改,其他的也有所见闻。先实现一种,再进行其他其他深究,以及使用好坏。

vue文档说明 对于需要使用输入法 (如中文、日文、韩文等) 的语言,你会发现 v-model 不会在输入法组合文字过程中得到更新。如果你也想处理这个过程,请使用 input 事件。

需要分两种形式,一种是原生,一种是基于组件,假设需求为输入数字,同时四位一个空格,类似输入银行卡号

  • 原生

    使用 v-model 进行数据绑定

// template
<input v-model="value" type="text" @input="setValue($event.target)">
// js
data () {
    return {
        value: ''
    }
}

setValue (target) {
    // 输入的数据进行初始化,将非数字的替换为空
    const val = target.value.toString().replace(/[^0-9]/ig,"")
    // 重新赋值
    this.value = v.replace(/(\d{4})(?=\d)/g, '$1 ')
}

不适用 v-model 进行数据绑定

// template
<input type="text" @input=""></input>
// js
data () {
    return {
        form {
            accout: ''
        }
    }
}
setValueNotWidthVModel (target) {
    const v = target.value.toString().replace(/[^0-9]/ig,"")
    // 此处是获取数据的地方
    this.form.accout = v.replace(/\s/g, '')
    // 此处是页面进行显示
    target.value = v.replace(/(\d{4})(?=\d)/g, '$1 ')
}

  • 组件方式
    组件都是对原始input进行额外处理了一层
<!-- template -->
// element-ui
<el-input v-model="form.accout" @input="changeInputValue"></el-input>
// iview
<Input v-model="form.accout" @input="changeInputValue" />
<!-- js -->
data () {
    return {
        form: {
            account: '0'
        }
    }
}
// 由于是组件,返回值 v 直接是value ,无法传参,或者`$event`
changeInputValue (v) {
    const v = val.toString().replace(/[^0-9]/ig,"")
    // 需要延迟一下,对值进行设置
    // https://github.com/ElemeFE/element/blob/dev/packages/input/src/input.vue 可以看到设置原始值时,使用 this.$nextTick()
    this.$nextTick(() => {
        // https://segmentfault.com/q/1010000009840451/a-1020000010449110
        this.form.accout = v.replace(/(\d{4})(?=\d)/g, '$1 ')
    })
}

总结

  • 依旧不知道使用computed是如何实现的,上述方法,通过input时间,便可以一直拿到值,不用额外进行处理,因为v-model进行了绑定

原文地址:https://www.cnblogs.com/sinosaurus/p/10963526.html

时间: 2024-11-05 19:35:52

vue中如何实时修改输入的值的相关文章

vue中简单的修改密码校验的代码

<el-form :inline="true" :model="ruleForm" ref="ruleForm" :rules="rules" label-width="120px" size="medium"> <el-row class="text-center"> <el-col :span="24"> &

vue中实现动态切换不同的值

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

Vue中的async和await的使用

async和await 在Vue中如果某个方法的返回值是Promise对象那么我们可以使用async和await来简化这次Promise操作 注:await只能用在被async修饰的方法中 没有使用async和await login(){ this.$refs.loginFormRef.validate( valid =>{ console.log(valid); if (!valid) return; const result= this.$axios.post("login/login

Vue ---在for循环修改页面中某个值,页面没有及时刷新问题(使用this.$forceUpdate()解决)

最近使用vue开发时,在一个函数中使用for循环,改变了页面中的值,在函数中查看是修改成功的,但是页面中没有及时刷新. 解决方法: 运用this.$forceUpdate()强制刷新. export default { data() { return { dataList:[], }; }, methods: { getData() { var _this = this; var dataList = []; dataList = response.data.data; for(var i=0;

C++中出现“IntelliSense: 表达式必须是可修改的左值”的Bug解决

说明:在学习算法导论,需要写一嵌套的小程序,题目是: Consider a three-parameter recursive function w(a, b, c): if a <= 0 or b <= 0 or c <= 0, then w(a, b, c) returns: 1 if a > 20 or b > 20 or c > 20, then w(a, b, c) returns: w(20, 20, 20) if a < b and b < c

如何实时获取DBGrid 中当前单元格输入的内容?

如何获取DBGrid 中当前单元格输入的内容? 还没输入完成,我想实时获取 Cell中的内容,以便作其他处理, 用什么事件呢? 所以Field的Onchange事件是没用的. 这个问题简单啊,每输入1个数据的后就提交(并不是提交到数据库,还是在编辑状态),那么用DataSet就可以取值了 用DBGrid的KeyUp事件: procedure TForm1.DBGrid1KeyUp(Sender: TObject; var Key: Word;   Shift: TShiftState); beg

(很难啊)如何实时获取DBGrid 中当前单元格输入的内容? [问题点数:100分,结帖人yifawu100]

如何获取DBGrid 中当前单元格输入的内容? 还没输入完成,我想实时获取 Cell中的内容,以便作其他处理,用什么事件呢? 所以Field的Onchange事件是没用的. DBGrid1.SelectedField.AsStringDBGrid1.SelectedField.Text看你需要选择 这个问题简单啊,每输入1个数据的后就提交(并不是提交到数据库,还是在编辑状态),那么用DataSet就可以取值了用DBGrid的KeyUp事件: procedure TForm1.DBGrid1Key

vue中父组件如何监听子组件值的变化

vue中我们会遇到很多父子组件通信的需求, 下面简单列一下,父子组件通信的几种情况 1:父组件向子组件传值:使用prop向子组件传值: 2:子组件实时监听父组件传来的值的变化:使用watch去监听父组件传来的值: 3:父组件可以通过this.$refs.name.去访问子组件的值或方法: 4:子组件可以通过this.$parent.去访问父组件的值或方法: 总结了一下,感觉好像挺全面的,好像不缺啥了.... 但是仔细一想,父组件如何去监听子组件的值呢?如何根据子组件中的某个值的变化,父组件作出响

c#中数组名作为参数如何通过修改形参的值来改变实参的值?

using System; namespace ConsoleApplication1 { class Program { void f(int[] a) { a[0] = 1;//通过这种方式就可以修改实参的值,说明通过这种方式就是在原内存上来修改元素的值 } static void Main(string[] args) {Program obj=new Program(); int[] a =new int[4] { 6, 7, 8, 9 }; obj.f(a); for (int i =