记录vue绑定class和style出现先后顺序问题

最新推荐文章于 2024-08-04 21:39:31 发布

demon_jesse

最新推荐文章于 2024-08-04 21:39:31 发布

阅读量1.3k

点赞数

分类专栏：前端 vue 生命周期文章标签： vue绑定class

本文链接：https://blog.csdn.net/weixin_43186180/article/details/88644336

版权

前端同时被 3 个专栏收录

4 篇文章 0 订阅

订阅专栏

vue

2 篇文章 0 订阅

订阅专栏

生命周期

1 篇文章 0 订阅

订阅专栏

近期做项目，发现一个新的问题，废话不多说，直接上代码`
      <div>
              <span>手机号:</span><input type="text" @keyup="phoneVersify" name="phone" v-model="phoneVersifyData"  	      @blur="phoneVersify" autocomplete="off"  placeholder="请填写正确手机号">
              <div :class="{allTip: phoneIsNull, pTip: phoneNotMatch}" style="margin-left: 70px;"></div>
       </div>
```

data () {
	return {
		phoneVersifyData: '',
      phoneIsNull: false,
      phoneNotMatch: true
}
}

phoneVersify() {
          let p = this.phoneVersifyData;
          if (p === '') {
            $('.pTip').html('手机号不能为空！');
            return false;
          } else if (!/^1\d{10}$/.test(p)){
            $('.pTip').html('请输入正确手机号！');
            this.phoneNotMatch = true;
            return false;
          } else {
            $('.pTip').html('');
            this.phoneIsNull = false;
            this.phoneNotMatch = false;
          }

这样，当页面第一次渲染的时候，正则第一次总是不生效，后来经过研究，发现把该正则验证方法放在vue生命周期 beforeUpdate里执行的时候，这个问题居然解决了。不知道大家有没有遇到此类问题。