vue中this.$nextTick的使用

vue工程中使用this.$nextTick禁止输入异常字符

在开发项目的时候需要进行表单的验证，输入框的校验等等，可以通过vue中的watch对象，以及this.$nextTick的回调，和正则表达式的配合既可以实现禁止的效果下面是一个实际案例。

在进行实际案例之前顺便进行巩固一下vue的一些小的知识点

watch响应数据变化

1.watch常用用法

1
<input type="text" v-model="userPhone"/>

1
2
3
4
5
6
7
8
9
10
11
new Vue({
  el: '#root',
  data: {
    userPhone: ''
  },
  watch: {
    userPhone(value) { // 可以直接写方法
      // ...
    }
  } 
})

另外一种写法

1
2
3
4
5
6
7
8
9
new Vue({
  el: '#root',
  data: {
    userPhone: ''
  },
  watch: {
    userPhone：'checkPhone' // 后面可以直接写一个方法名称
  } 
})

当监听到userPhone的值变化的时候，就可以触发相应的方法

vue中的nextTick

Vue中的nextTick涉及到Dom的异步更新行为,当前页面的数据是伴随着dom的更新而渲染上去的，如果是单纯的修改双向绑定数据，dom上的数据并不是马上更新的。
nextTick的主要使用场景：
1.在vue中created()函数中进行dom的操作，一定要放在mounted钩子函数中或者Vue.nextTick()回调函数中。
2.在数据变化后要执行的某个操作，这个操作需要使用随数据改变的DOM结构的时候，这个操作都应该放到Vue.nextTick()的回调函数中。

具体使用方法

手机号输入框，禁止输入非数字的时候,配合使用验证非数字正则表达式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!--html部分，这里使用了mintui 组件-->
 <mt-field
          class="phone"
          label="手机号"
          type="tel"
          :attr="{ maxlength: 11 }"
          v-model="phoneNumber"
        >


//js部分
export default {
	data(){
		return {
			phoneNumber: '', //电话号码
		}
	},
	watch:{
		phoneNumber(v){
		conts reg = /\D/g
			if(v!==''){ // 如果不等于空
				this.$nextTick(()=>{
				this.phoneNumber = String(v).replace(isNotNum,'')
			}
		}
	}
}