<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>限制input输入的位数</title>
</head>
<body>
      <div id="app">
         <input type="text"   v-split.5="msg"/>
      </div>
</body>
<script src="./node_modules/vue/dist/vue.js"></script>  
<script>
    //设置input 的输入位数
  Vue.directive('split',{
      update(el,bindings,vnode) {
            console.log(bindings);
            let [,len]  = bindings.rawName.split('.');
            console.log(len)
            let ctx = vnode.context;  //msg
            el.addEventListener('input',(e)=>{
                let  val  =  e.target.value.slice(0,len);
                ctx[bindings.expression]=val;
                el.value = val;
            })
            //默认值
            el.value=ctx[bindings.expression];
      },
      bind(el,bindings,vnode) {
           let ctx = vnode.context;  //msg
           let [,len]  = bindings.rawName.split('.');
            el.addEventListener('input',(e)=>{
                let  val  =  e.target.value.slice(0,len);
                ctx[bindings.expression]=val;
                el.value = val;
            })
             //默认值
             el.value=ctx[bindings.expression];
      }
  })
  let vm = new Vue({
      el:"#app",
      data() {
         return {
             msg:'a'
         }
      }
  })
</script>
</html>
 
 
 
 
el,bindings,vnode
 
el表示 html 元素
bindings 表示绑定的元素上的属性
vnode 表示绑定元素的虚拟node

自定义指令 限制input 的输入位数的更多相关文章

  1. Vue自定义指令实现input限制输入正整数

    directive.js import Vue from 'vue' export default () => { Vue.directive('Int', { inserted: functi ...

  2. angular5 自定义指令 输入输出 @Input @Output(右键点击事件传递)

    指令写法,angular5官网文档给的很详细. 首先要创建一个文件,需注意命名规范(后缀名为xxx.directive.ts): 今天要记录的是在多个li中,右键点击之后显示出对应的菜单,直接上图吧! ...

  3. 自定义指令 格式化input数据为非负整数

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. Angular17 Angular自定义指令

    1 什么是HTML HTML文档就是一个纯文本文件,该文件包含了HTML元素.CSS样式以及JavaScript代码:HTML元素是由标签呈现,浏览器会为每个标签创建带有属性的DOM对象,浏览器通过渲 ...

  5. vue自定义指令v-scroll（directive）

    vue开发中,很多地方如果说都用到了某一方法,我们就可以进行指令化封装,通过自定义指令来实现这里通过两个例子说明vue-Directive的使用 1.v-focus 主要用来实现页面加载进来的时候文本 ...

  6. vue3.0自定义指令（drectives)

    在大多数情况下,你都可以操作数据来修改视图,或者反之.但是还是避免不了偶尔要操作原生 DOM,这时候,你就能用到自定义指令. 举个例子,你想让页面的文本框自动聚焦,在没有学习自定义指令的时候,我们可能 ...

  7. Vue input 控件: 通过自定义指令(directive)使用正则表达式限制input控件的输入

    前言: 网站中的input输入框使用非常广泛,因业务场景不同需要对输入框做合法性校验或限制输入,比如电话号码.邮件.区号.身份证号等.input框的不合法内容主要有两种方式处理:1.用户输入内容后,通 ...

  8. Vue学习笔记十一：按键修饰符和自定义指令(钩子函数)

    目录 padStart:补位 按键修饰符 Vue提供的按键修饰符 自定义按键修饰符 自定义指令 自定义指令的使用 钩子函数 钩子函数参数 使用钩子函数的bingding参数 私有自定义指令 钩子函数的 ...

  9. AngularJs自定义指令详解（6） - controller、require

    在前面文章中提到一旦声明了require,则链接函数具有第四个参数:controller. 可见require和controller是配合使用的. 在自定义指令中使用controller,目的往往是要 ...

随机推荐

  1. 一元回归1_基础（python代码实现）

    python机器学习-乳腺癌细胞挖掘(博主亲自录制视频) https://study.163.com/course/introduction.htm?courseId=1005269003&u ...

  2. VS2010远程调试C#程序

    场景: 客户的计算机运行程序出现异常,由于办公场所不在一起,无法直接在客户的机器上调试.此时希望可以直接在开发人员的计算机(本地机器)上远程调试客户机上的软件. 假设: 本地机器的系统账户为 GIS, ...

  3. 那些年我们经历的BT面试题

    初入职场面试的我到处碰壁,以下是我个人对几道面试题的小总结: 1.一列数字的规则如下:1,1,2,3,5,8,13,21, 34........ 求第30位数字是多少,用递规和非递归两种方法算法实现. ...

  4. webpack中的 chunk,module,bundle的区别，以及hidden modules是什么

    hidden modules是什么: chunk,module,bundle的区别 总结: module是指任意的文件模块,等价于commonjs中的模块 chunks是webpack处理过程中被分组 ...

  5. Unity3D-Canvas-UIScaleMode

    UnityCanvasUI自适应部分 用Canvas下的自适应UI Scale Mode: Constant Pixel Size:固定像素大小,无论如何UI怎么样就怎么样,只能通过 Scale Fa ...

  6. Java的in.nextInt()和in.nextLine()方法的具体内涵

    本人也是刚开始学习java语言,在学习的过程中,老师让我们做一个模拟学生学籍管理系统的小程序.因为刚开始,做的是比较简单的,用switch语句做界面,然后配合Scanner 接收输入的数字进行跳转,完 ...

  7. 解析jmeter阶梯加压与请求的计算

    用百度做例子 我们设置阶梯加压线程组的请求参数,如下图 上图表示 1:每隔2秒钟,会在1秒内启动5个线程 2:每次线程加载之后都会运行2s然后开始下一次线程加载 3:最终会加载50个线程并持续运行30 ...

  8. ActiveMQ学习教程/2.简单示例

    ActiveMQ学习教程(二)——简单示例 一.应用IDEA构建Maven项目 File->New->Module...->Maven->勾选->选择->Next ...

  9. Linux-Spark-Hadoop-Hive安装配置

    1. JAVA安装配置:https://www.cnblogs.com/lamp01/p/8932740.html 2. Spark安装配置:https://www.cnblogs.com/vince ...

  10. java版微信支付/查询/撤销

    最近公司接入微信刷卡支付,网上根本没见到很直接的教程(可能眼拙),一直摸滚打爬,加班加点才走通,忍不了必须写一写 微信 刷卡支付/查询/撤销... 必须要有公众号然后去申请,申请自己去看文档,这里主要 ...