<!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. 索引rebuild与rebuild online区别

    索引rebuild与rebuild online区别 1.0目的,本篇文档探讨索引rebuild 与 rebuild online的区别 2.0猜测:已有的知识 2.1对索引rebuild重建会对表申 ...

  2. [LeetCode&Python] Problem 836. Rectangle Overlap

    A rectangle is represented as a list [x1, y1, x2, y2], where (x1, y1) are the coordinates of its bot ...

  3. easyui的DataGrid的单元格添加ProgressBar进度条

    网上的搜到的好多不能用,官方easy-ui使用进度条 <div id="p" class="easyui-progressbar" ></di ...

  4. 2019寒假算法基础集训营1 - B 小a与"204"

    题目: 小a非常喜欢这个数字,因为. 现在他有一个长度为的序列,其中只含有这三种数字 设为序列中第个数,你需要重新排列这个数列,使得最大(公式的含义是:每个数与前一个数差的平方的和) 注意:我们默认 ...

  5. linux zip tar 压缩打包命令

    zip 压缩命令:(可压缩文件或目录) 压缩文件: zip new_name.zip  file_name unzip name.zip   解压 压缩文件或目录: 指定解压位置: unzip  na ...

  6. 浅谈log4j-5-读取properties文件(转自godtrue)

    #### 在代码中配置log4j环境的方式,我们已经见识过了,是不是感觉比较麻烦,我们试试使用配置文件的方式是否使您的应用程序更加的灵活.# Log4j支持两种配置文件格式,一种是XML格式的文件,一 ...

  7. 下面的程序段创建了BufferedReader类的对象in，以便读取本机c盘my文件夹下的文件1.txt。File构造函数中正确的路径和文件名的表示是( )。

    下面的程序段创建了BufferedReader类的对象in,以便读取本机c盘my文件夹下的文件1.txt.File构造函数中正确的路径和文件名的表示是(    ). ./表示当前项目的路径../表示当 ...

  8. Go Example--切片

    package main import ( "fmt" ) func main() { //make来初始化一个切片,必须指名切片的长度 s:= make([]string, 3) ...

  9. nginx 优化(突破十万并发)

    一般来说nginx配置文件中对优化比较有作用的为以下几项: worker_processes 8; nginx进程数,建议按照cpu数目来指定,一般为它的倍数. worker_cpu_affinity ...

  10. 【jar包删除，再添加版本更高的jar】******.jar in project cnnot be read or is not a valid

    把4.2.0删除,然后添加其他版本的jar包