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中的过滤器不能 ...
随机推荐
- UE5打包SDK未正确安装的问题
正文 Windows(笔者之前用的电脑是windows10,最新电脑使用的是windows11)下UE5打包项目的需要安装Visual Studio. 而且安装的时候需要选择上C++ 游戏开发相关模块 ...
- 4.1 探索LyScript漏洞挖掘插件
在第一章中我们介绍了x64dbg这款强大的调试软件,通过该软件逆向工程师们可以手动完成对特定进程的漏洞挖掘及脱壳等操作,虽然x64dbg支持内置Script脚本执行模块,但脚本引擎通常来说是不够强大的 ...
- 树莓派4B-细分驱动步进电机
树莓派4B-细分驱动步进电机 项目介绍 利用4B树莓派控制步进电机转动,精度可达:0.0144度 (即360度/25000) 适用于非常精密的角度转动. 舵机的精度为1度,无法实现超高精度控制. 硬件 ...
- Servlet案例：发生错误org.springframework.dao.EmptyResultDataAccessException: Incorrect result size: expecte
20-Jun-2020 20:48:31.466 信息 [http-nio-8080-exec-7] com.alibaba.druid.pool.DruidDataSource.info {data ...
- Unity的OnOpenAsset：深入解析与实用案例
Unity OnOpenAsset 在Unity中,OnOpenAsset是一个非常有用的回调函数,它可以在用户双击资源文件时自动打开一个编辑器窗口.这个回调函数可以用于自定义资源编辑,提高工作效率. ...
- 浅谈REFS文件系统数据恢复研发经历(1)
作为80后技术员, 我一直很喜欢李玟, 是我们那个时代的偶像, 一直也很喜欢听他的歌, 看到她的噩耗, 还是很那么的无法理解, 一个那么好的人怎么会得抑郁症呢, 心里多少还是无法接受. 不过联想到自己 ...
- pytest7.4版本的一个变更，可能会影响你的项目
pytest7.4版本的一个变更,可能会影响你的项目 本文撰写于 2023.7.10 准备工作 项目结构如下 D:\Gitee\DemoRepo (17.97MB) +-- testCases (1. ...
- 【Springboot】过滤器
Springboot实现过滤器 实现过滤器方式有两种: Filter过滤器具体实现类 通过@WebFilter 注解来配置 1.Filter过滤器具体实现类 1.1 实现Filter @Compone ...
- 用Python操控斑马打印机的技术总结
前言 由于之前产品打印的标签为人工输入,可能存在信息错误且不适合大批量操作.所以我进行了前期的研究和总结,完成了任务,并这里做下技术总结,方便后面的人进行开发. 技术总结 斑马打印机的坑 官网:htt ...
- 【ElasticSearch】大数据量情况下的前缀、中缀实时搜索方案
简述 业务开发中经常会遇到这样一种情况,用户在搜索框输入时要实时展示搜索相关的结果.要实现这个场景常用的方案有Completion Suggester.search_as_you_type.那么这两种 ...