<!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. ORA-03001,GATHER_TABLE_STATS数据库自动收集统计信息报错

    1.根据Alert报错信息,查询Trace日志 /oracle/app/oracle/admin/fgsquery/bdump/fgsquery_j001_11111.trc Oracle Datab ...

  2. golang 3des/ecb/cbc/pkcs5 加解密

    本人新手,参考文档: http://blog.studygolang.com/2013/01/go%E5%8A%A0%E5%AF%86%E8%A7%A3%E5%AF%86%E4%B9%8Bdes/ h ...

  3. python 加密 hashlib与hmac模块

    https://www.jb51.net/article/128911.htm hashlib模块简介: hashlib模块为不同的安全哈希/安全散列(Secure Hash Algorithm)和 ...

  4. 软件安装配置笔记(二)——SQL Server安装

    客户端安装: 服务器端安装:

  5. 再回首 基本数据类型和 if语句

    一 变量:(使用变量是不能加引号,要不就变成字符串了) 变量的命名规则: 1.数字,字母,下划线组成. 2.变量不能是数字开头 3.区分大小写 4.不要使用中文或者拼音 5.要有相应的意义 6.不能使 ...

  6. Python IDLE theme

    #转自 http://www.2cto.com/os/201507/418532.html #win10+python3.5.2 #保护视力 .idlerc 目录下新建名为 config-highli ...

  7. 写出一个程序,接受一个由字母和数字组成的字符串,和一个字符,然后输出输入字符串中含有该字符的个数。不区分大小写。java算法

    知识点一:equalsIgnore 1.使用equals( )方法比较两个字符串是否相等.它具有如下的一般形式: boolean equals(Object str) 这里str是一个用来与调用字符串 ...

  8. doubleclick protobuf file load to project

    1,download protobuf file to local wget https://developers.google.com/ad-exchange/rtb/downloads/openr ...

  9. oracle数据库经常提示27102 out of memory解决方法

    网上有很多解决方案,但是我一个也看不懂,不知道写的什么鬼的东西,为什么一句话就能解决的事,非得长篇大论说原理是什么,看得一脸懵逼 我的解决方法入戏 vi /etc/sysctl.conf 修改kern ...

  10. skipper http router 工具

    skipper 是一个http router && 反向代理服务组件,同时支持类似kubernetes 模型的ingress,由zalando 公司的团队开发 并开源,从功能上来看,可 ...