<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>

<div id="app">

    <input type="text" v-model="available_time" v-format-floor>

    <input type="text" v-model="a" v-format-floor>

    <button @click="show">button</button>

</div>

    <script>

        var vm = new Vue({

            el:"#app",

            data:{

                available_time:"",

                a: '',

            },

            methods:{

                show(){

                    console.log(this.a)

                }

            },

            directives: {

                "format-floor": {

                    update: function (e,vnode,oldVnode) {

                        // 获取变量名字

                        var temp = oldVnode.data.directives[0].expression;var e = e.value;

                        e = Math.floor(e) || 0;

                        vm[temp] = e;

                    }

              }

            }

        })

    </script>

</body>

</html>

自定义指令 格式化input数据为非负整数的更多相关文章

  1. AngularJS: 自定义指令与控制器数据交互

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

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

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

  3. PHP自定义函数格式化json数据怎么调用？

    <?php/*** Formats a JSON string for pretty printing** @param string $json The JSON to make pretty ...

  4. 自定义指令 限制input 的输入位数

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

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

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

  6. Vue自定义指令 数据传递

    在项目开发过程中,难免会遇到各种功能需要使用Vue自定义指令--directive 去实现 .关于directive的使用方式这里就不做过多的介绍了,Vue官方文档中说的还是听明白的.今天讲讲在使用V ...

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

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

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

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

  9. VUE3 之 自定义指令的实现 - 这个系列的教程通俗易懂，适合新手

    1. 概述 老话说的好:能屈能伸的人生,才是完满而丰富的人生. 言归正传,今天我们来聊聊 VUE 中自定义指令的实现. 2. 自定义指令 2.1 文本框聚焦的实现  <body> < ...

随机推荐

  1. Java中的访问权限细谈

    一.成员访问控制权限 作用域 当前类 当前包 子孙类 其他包 public √ √ √ √ protected √ √ √ X private √ X X X default √ √ 当前包下继承可以 ...

  2. python2.7.9安装mysql-python模块

    我使用的系统版本是: SLES12-sp2 使用python连接Mysql数据库,需要安装mysql-python模块: 1. 首先安装pip: 从python官方网站下载get-pipe.py,执行 ...

  3. Hexo重装小结

    安装好node.js后: 使用命令npm install -g hexo,很慢,基本安装不了. 换用淘宝镜像: $ npm install -g cnpm --registry=https://reg ...

  4. 如何在git上创建的本地仓库

    一.安装git(在git) 二. 三.输入个人信息(代码提交者) git config --global user.name "xxxx" git config --global ...

  5. HDU 1014 G题

    Uniform Generator Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) T ...

  6. Atom编辑神器

    最近喜欢上了Atom编辑神器,安装就不说了,重点讲配置. 一:软件配置 1.先将欢迎界面去掉,每次打开Atom的时候都会出现,实在是很烦人. 就在欢迎界面里面有个复选框,去掉选中就可以了. 2.让At ...

  7. python------面向对象介绍之多态实例

    一. 多态 一种接口,多种实现. 多态性(polymorphisn)是允许你将父对象设置成为和一个或更多的他的子对象相等的技术,赋值之后,父对象就可以根据当前赋值给它的子对象的特性以不同的方式运作. ...

  8. ionic局部刷新页面与刷新整个页面

    1.全局刷新,禁用缓存: 在app.js中设置cach:false,如下: .state('material', { url: '/material', cache:false, templateUr ...

  9. 【BZOJ1202】【HNOI2005】狡猾的商人

    查分约束好,好写好调好AC! 原题: 刁姹接到一个任务,为税务部门调查一位商人的账本,看看账本是不是伪造的.账本上记录了n个月以来的收入情况,其中第i 个月的收入额为Ai(i=1,2,3...n-1, ...

  10. Debug outlook add-in (office.js) 小技巧

    这几天在使用office.js 做outlook add-in的时候出现了一个问题: 不知道运行时去调试. 这里给大家介绍两个调试add-in 的方法. office365 其他软件 add-ins ...