深入理解Vue生命周期、手动挂载及挂载子组件(2)

日期：2020-05-21 栏目：程序人生 浏览：次

errorLabel错误提示模板，我们在要bind() 方法中创建，然后挂载到它上面；hasError 是辅助属性，方便我们用来判断当前是有错误还是没有错误。

4、在update() 方法中，实时监听用户的输入，然后移除/添加 错误模板

 update(el,binding,vnode){
   if(/\w{6,20}/.test(el.value)){
     // 验证通过
     if (Vue.hasError){
       el.parentNode.removeChild(Vue.errorLabel);
       Vue.hasError = !Vue.hasError;
     }
   }else{
     // 验证没有通过
     if (!Vue.hasError){
       el.parentNode.appendChild(Vue.errorLabel);
       Vue.hasError = ! Vue.hasError;
     }
   }
 },

5、演示效果如下图


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持黑区网络。