Vue之自定义过滤器
使用Vue.filter('过滤器名称'，方法);
1.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue.js"></script>
<script> </script>
</head>
<body>
<div id="box">
{{a | toDou}}
</div>
<script>
Vue.filter('toDou',function(input){
return input<10?'0'+input:''+input;
});
var vm=new Vue({
data:{
a:9
},
methods:{ }
}).$mount('#box'); </script>
</body>
</html>
效果：
2.带参数的自定义过滤器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue.js"></script>
<script> </script>
</head>
<body>
<div id="box">
{{a | toDou 1 2}}
</div>
<script>
Vue.filter('toDou',function(input,a,b){
alert(a+','+b);
return input<10?'0'+input:''+input;
});
var vm=new Vue({
data:{
a:9
},
methods:{ }
}).$mount('#box'); </script>
</body>
</html>
3.自定义日期
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue.js"></script>
<script> </script>
</head>
<body>
<div id="box">
{{a | date}}
</div>
<script>
Vue.filter('date',function(input){
var oDate=new Date(input);
return oDate.getFullYear()+'-'+(oDate.getMonth()+1)+'-'+oDate.getDate()+' '+oDate.getHours()+':'+oDate.getMinutes()+':'+oDate.getSeconds();
}); var vm=new Vue({
data:{
a:Date.now()
},
methods:{ }
}).$mount('#box'); </script>
</body>
</html>
Vue之自定义过滤器的更多相关文章
- vue 自定义过滤器
vue允许自定义过滤器,被用作一些常见文本的格式化.由“管道符”指示,格式如下: <!-- 在两个大括号中 --> {{message | capitalize}} <!-- 在 ...
- 第六节：Vue过滤器的用法和自定义过滤器
1.过滤器的用法,用 '|' 分割表达式和过滤器. 例如:{{ msg | filter}} {{msg | filter(a)}} a就标识filter的一个参数. 用两个过滤器:{{ ...
- Vue自定义过滤器
gitHub地址: https://github.com/lily1010/vue_learn/tree/master/lesson05 一 自定义过滤器(注册在Vue全局) 注意事项: (1)全局方 ...
- Vue.js学习 Item14 – 过滤器与自定义过滤器
基础 类似于自定义指令,可以用全局方法 Vue.filter() 注册一个自定义过滤器,它接收两个参数:过滤器 ID 和过滤器函数.过滤器函数以值为参数,返回转换后的值: Vue.filter('re ...
- vue.js之过滤器，自定义指令，自定义键盘信息以及监听数据变化
一.监听数据变化 1.监听数据变化有两种,深度和浅度,形式如下: vm.$watch(name,fnCb); //浅度 vm.$watch(name,fnCb,{deep:true}); //深度监视 ...
- vue.js学习 自定义过滤器使用（2）
gitHub地址: https://github.com/lily1010/vue_learn/tree/master/lesson05 一 自定义过滤器(注册在Vue全局) 注意事项: (1)全局方 ...
- vue.js学习 自定义过滤器使用（1）
在这个教程中,我们将会通过几个例子,了解和学习VueJs的过滤器.我们参考了一些比较完善的过滤器,比如orderBy 和 filterBy.而且我们可以链式调用过滤器,一个接一个过滤.因此,我们可以定 ...
- vue中自定义指令vue.direvtive，自定义过滤器vue.filter(),vue过渡transition
自定义指令 默认设置的核心指令( v-model,v-bind,v-for,v-if,v-on等 ),Vue 也允许注册自定义指令.注意,在 Vue2.0 里面,代码复用的主要形式和抽象是组件——然而 ...
- VueJS自定义过滤器:new Vue({filters:{filter1:function(){}....}})
Vue.js 允许你自定义过滤器,被用作一些常见的文本格式化. 语法 <!-- 在两个大括号中 --> {{ message | capitalize }} <!-- 在 v-bin ...
- Vue学习之过滤器和自定义指令小结（三）
过滤器: 过滤是一个数据经过了这个过滤之后出来另一样东西,可以是从中取得你想要的,或者给那个数据添加点什么装饰.过滤器就是过滤用的工具.渲染数据用的!!! 我们需要知道的是: 1.Vue中的过滤器不能 ...
随机推荐
- Dapr 发布模糊测试报告｜Dapr 完成模糊测试审核
Dapr 团队最近在博客上发布了 Dapr 完成模糊测试审核[1]的文章,该审计是 CNCF 通过模糊测试改善[2]开源云原生项目安全状况的计划的一部分.该审计由 Ada Logics[3] 于 20 ...
- Github的一个彩蛋
点击新建仓库 项目名称为自己的昵称 下方提示意思说: 你发现了一个秘密 这是一个特别的仓库 你可以为你的首页增加README.md 就像给项目介绍一样,这是你的自我介绍 点击编辑,里面会与建议模板 以 ...
- Nginx使用Lua脚本加解密RSA字符串
本文主要介绍使用Lua脚本对采用RSA加密后的字符串进行解密的过程. 使用第三方类库lua-resty-rsa,参考地址:https://github.com/spacewander/lua-rest ...
- 【调制解调】VSB 残留边带调幅
说明 学习数字信号处理算法时整理的学习笔记.同系列文章目录可见 <DSP 学习之路>目录,代码已上传到 Github - ModulationAndDemodulation.本篇介绍 VS ...
- hexo博客yilia主题_more截断文章_多标签添加
以下均为自己遇到的问题并加以修改或者纠正. 在文章下方可以使用more语句进行截断,这样博客首页只会出现文章的前面一小部分,看起来很清爽简约 或者 language: zh-CN <!--mor ...
- 2022-1-10 控件学习2 Button、CheckBox、RadioButton、PasswordBox、Image、ToolTip
Button 设置带图片的按钮: 设置button按钮通用类型: CheckBox IsChecked设置是否选中 RadioButton 使用GroupName这 ...
- Nginx报错：nginx: [error] OpenEvent("Global\ngx_reload_14944") failed (2: The system cannot find the file specified)
nginx.exe -s reload 执行报错 错误原因: Nginx 尚未启动导致,执行 start nginx 命令开启Nginx nginx.exe -s reload 至此问题解决
- Gin+Xterm.js实现远程Kubernetes Pod（一）
Xterm.js简介 xterm.js (https://xtermjs.org/)是一个开源的 JavaScript 库,它模拟了一个终端接口,可以在网页中嵌入一个完全功能的终端.这个库非常灵活,并 ...
- Web通用漏洞--CSRF
Web通用漏洞--CSRF 漏洞简介 CSRF(Cross Site Request Forgery, 跨站请求伪造/客户端请求伪造),即通过伪造访问数据包并制作成网页的形式,使受害者访问伪造网页,同 ...
- 将Python打包成exe
使用以下命令首先安装包 pip install pyinstaller 参数以及用法 -F生成结果是一个exe文件,所有的第三方依赖.资源和代码均被打包进该exe内 -D生成结果是一个目录,各种第三方 ...