<!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. scrapy框架持久化存储

    基于终端指令的持久化存储 基于管道的持久化存储 1.基于终端指令的持久化存储 保证爬虫文件的parse方法中有可迭代类型对象(通常为列表or字典)的返回,该返回值可以通过终端指令的形式写入指定格式的文 ...

  2. 百练8216-分段函数-2016正式A题

    百练 / 2016计算机学科夏令营上机考试 已经结束 题目 排名 状态 统计 提问   A:分段函数 查看 提交 统计 提问 总时间限制:  1000ms 内存限制:  65536kB 描述 编写程序 ...

  3. 深入学习Motan系列（二）——服务发布

    闯关经验: 袋鼠走过了第一关,顺利搭建出了Demo,信心爆棚.不过之后,心想怎么去研究这个框架呢.查了一下,官方文档,好像没什么东西可以研究啊.后来,又搜了搜博客,因为这是微博的框架嘛,所以搜索时用百 ...

  4. 【点击项目属性】Target runtime Apache Tomcat v7.0 is not defined

    这个项目是去年用同一个eclipse做的,但是今年原封不动导入的时候,确发现这个东西 tomcat选成我们本地的tomcat8就可以了 泼菲解决.

  5. static关键字的使用（有个深刻领悟）

    没有实例化对象的时候进行可以调用static 属性  static方法 (用类名去调用) 非static定义的方法可以调用static的属性或方法. static定义的方法不能调用非static的方法 ...

  6. MATLAB中多个一维数组的合并

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/u013538664/article/details/37673711 1.一维数组直接合并      ...

  7. C# to IL 18 Glossary(术语)

  8. 常用gui软件使用技巧

    xmind powerdesinger notepad++ firefox office ========================================= win10企业版安装 xm ...

  9. ThinkPHP3.2 where方法的使用

    where方法的用法是ThinkPHP查询语言的精髓,也是ThinkPHP ORM的重要组成部分和亮点所在,可以完成包括普通查询.表达式查询.快捷查询.区间查询.组合查询在内的查询操作.where方法 ...

  10. operator 重载内置运算符

    operator 关键字来重载内置运算符,或提供类或结构声明中的用户定义转换.它可以定义不同类型之间采用何种转化方式和转化的结果. operator用于定义类型转化时可采用2种方式,隐式转换(impl ...