<!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

最新文章

  1. Neo4j Index Notes
  2. Linux 学习笔记 Linux环境变量初稿
  3. 自定义控制器的View(loadView)及其注意点
  4. 14.6.3.5 Configuring InnoDB Buffer Pool Flushing
  5. WAS
  6. centos扩容(pv,vg,lv)
  7. ImageLoader的使用
  8. Css实现checkbox及radio样式自定义
  9. Go语言打造以太坊智能合约测试框架（level2）
  10. python简介和python工具的选择
  11. 2019-04-22-day037-数据库的安装
  12. Centos7 启动脚本
  13. 【转】基于Python的接口测试框架实例
  14. pandas的日常笔记--查询
  15. Java与PHPweb开发比较
  16. POJ:3083 Children of the Candy Corn(bfs+dfs)
  17. jq的$(function(){})与window.onload的区别
  18. C#单元测试Nunit小结（20141018）
  19. CUPOJ6242: LHC的二进制升级版
  20. Jenkins持续集成企业实战系列之Jenkins配置演示-----03

热门文章

  1. from sklearn import datasets运行错误：ImportError: DLL load failed: 找不到指定的程序------解决办法
  2. mybaits&lt;set&gt;标签的使用
  3. 卡方检验（python代码实现）
  4. linux fedora原生的快捷键操作
  5. 2018 icpc 青岛
  6. 使用Postman对HTTP接口进行功能测试
  7. 【MM系列】SAP 各种冲销凭证
  8. cocos2dx基础篇(11) 点九图CCScale9Sprite
  9. selenium：css_selector定位详解（css selector和xpath的比较）
  10. win10安装mysql时报错[MY-012576] [InnoDB] Unable to create temporary file; errno: 2