<!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. Kafka高可用实现原理

    数据存储格式 Kafka的高可靠性的保障来源于其健壮的副本(replication)策略.一个Topic可以分成多个Partition,而一个Partition物理上由多个Segment组成. Seg ...

  2. HTTP基本原理（转）

    1. HTTP简介 HTTP协议(HyperText Transfer Protocol,超文本传输协议)是用于从WWW服务器传输超文本到本地浏览器的传送协议.它可以使浏览器更加高效,使网络传输减少. ...

  3. Java中的List集合和迭代器

    一.Java中的List集合. 终于有时间来好好整理一下Java中的集合. 首先要讲的就是List集合.Java中List集合主要将两个: 第一个是底层使用数组维护的ArrayList,第二个是底层是 ...

  4. python 闭包和迭代器

    一  函数名的运用:(函数名是一个变量,但它是一个特殊变量,与括号配合可以执行变量. (1) 函数名可以赋值给其他变量 def chi(): print("吃月饼") fn=chi ...

  5. doc 常用命令

    ★ 查看java环境变量 echo %JAVA_HOME% echo %PATH% echo %CLASSPATH%

  6. 通信协议演进与JCE协议详解

    一.通信协议概述通信协议是两个节点之间为了协同工作.实现信息交换,而协商的规则和约定,例如规定字节序,各个字段类型,使用什么压缩算法或加密算法等. 1.原始数据假设A和B通信,获取或设置用户基本资料, ...

  7. Linux内核模块编程之Helloworld（初级）

    注意printk那里,KERN_ALERT和打印消息之间是没有逗号的,搞得劳资查了半天才发现一直没有提示信息的原因 #include <linux/init.h> #include < ...

  8. cget cmake 包管理工具

    cget 是一个方便的进行cmake 包下载以及安装的工具 包含的特性 非侵入,无需编写特殊钩子就可以使用cmake 开箱即用, 由于使用了标准的基于cmake的方式,直接可以使用基于cmkae 的软 ...

  9. 13机器学习实战之PCA（1）

    降维技术 对数据进行降维有如下一系列的原因: 使得数据集更容易使用 降低很多算法的计算开销 去除噪音 使得结果易懂 在以下3种降维技术中, PCA的应用目前最为广泛,因此本章主要关注PCA. 主成分分 ...

  10. ASP.NET WebApi使用Swagger生成api说明文档

    最近做的项目使用mvc+webapi(非.Net Core),采取前后端分离的方式,后台提供API接口给前端开发人员.这个过程中遇到一个问题后台开发人员怎么提供接口说明文档给前端开发人员,最初打算使用 ...