vue自定义指令+只能输入数字和英文+修改v-model绑定的值

//环境:vue+iview

//Alphabet.js import Vue from 'vue'; Vue.directive('Alphabet', { //自定義指令只能輸入英文數字 inserted: function(e) { const el = e.querySelector('.ivu-input'); el.addEventListener("input", function(e) { //进行验证 checkedfun(el); }); el.addEventListener("input", function(e) { //进行验证 checkedfun(el); }); function checkedfun(el) { let reg = new RegExp("^[A-Za-z0-9]*$"); if (!reg.test(el.value)) { el.value = el.value.replace(/[^A-Za-z0-9]+/g, ""); el.dispatchEvent(new Event("input"));//调用input事件使vue v-model绑定更新 } } } });

  

 如果没有写这句el.dispatchEvent(new Event("input")); 输入框是有值,但是data定义的变量是没有变化的。
 为什么 el.dispatchEvent(new Event("input")) 可以改变呢?
 原因是因为v-model就是一个语法糖
      
  <Input v-Alphabet v-model="hhhFFF"></Input>
  <Input  :value="hhhFFF" @input="hhhFFF=$event.target.value"></Input>

 这两句的是一样的。

 所以想要真正改变data里面定义的变量hhhFFF,就需要手动触发input事件,才可以执行这句hhhFFF=$event.target.value才能真正的达到效果
原文地址:https://www.cnblogs.com/qiu-Ann/p/14087179.html