<div id="app"> <input type="text" v-limit.3="msg" v-focus> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script> Vue.directive("focus",{ /* 方法一*/ /* bind(el){ Vue.nextTick(function(){ // 在dom元素执行完之后执行 el.focus(); }); }*/ /* 方法二 */ inserted(el){ //绑定元素插入父节点时调用 el.focus(); } }); Vue.directive("limit",function(el,bindings,vnode){ /* el:元素 bindings:元素绑定的值 vue dom的更新是异步的 */ console.log(el); console.log(bindings); console.log(vnode); let [,len] = bindings.rawName.split("."); /*思想就是 把在文本框输入的值手动改到虚拟dom中,在虚拟dom 中改变 vlaue的值*/ let ctx = vnode.context; el.addEventListener("input",(e)=>{ let val = e.target.value.slice(0,len) ctx[bindings.expression] = val; console.log("ctx:",ctx[bindings.expression]); el.value = val; }); // el.value = ctx[bindings.expression].slice(0,len); }); /* Vue.directive("limit",{ //初始化的时候绑定 bind(el,bindings,vnode) { let ctx = vnode.context; ctx[bindings.expression]= el.value.slice(0,5); }, //数据更新的时候绑定 update(el,bindings,vnode) { let ctx = vnode.context; ctx[bindings.expression]= el.value.slice(0,5); } }); */ let vm = new Vue({ el:"#app", data:{ msg:"hello vue" } }); </script>
原文地址:https://www.cnblogs.com/moon-yyl/p/11755147.html
时间: 2024-11-09 09:43:45