简书

对将要插入html的对象进行处理

  • 一个简单的Vue示例

  • 基本过滤器用法

  • 带参数的过滤器

  • 全局过滤器

(这张图片有点问题,最后显示的应该是 hello world不是null)

  • 过滤器的简单应用



<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8" />

		<title>vPager</title>

		<script src="vue.js"></script>

	</head>

	<body>

		<div id="test">

			<div>a:{{a | NoFiniteToZero(true)}}</div>

			<div>b:{{b | yyyy-MM-dd}}</div>

			<div>c:{{c | NoFiniteToZero}}</div>

			<div>d:{{d | NoFiniteToZero}}</div>

			<div>e:{{e | RunIfFunction}}</div>

		</div>

		<script>

			Vue.filter('yyyy-MM-dd', function(value) {

				if(value == null) return "";

				if(value.constructor === Date) {

					return [value.getFullYear()

							, value.getMonth() + 1

							, value.getDate()

							].join("-");

				}

				return value

			});

			Vue.filter('NoFiniteToZero', function(value, numberOnly) {

				if(numberOnly && typeof value !== "number") return value || "";

				if(value == null) return "0";

				return isFinite(value) ? value : 0;

			});

			Vue.filter('RunIfFunction', function(value) {

				if(value == null) return "";

				if(typeof value === "function") {

					return arguments.callee(value());

				}

				return value;

			});	

			var xx = new Vue({

				el: "#test",

				data: {

					a: null,

					b: new Date(),

					c: NaN,

					d: Infinity,

					e: function() { return function(){ return "ye"; } }

				}

			});

		</script>

	</body>

</html>

Vue 学习笔记 — filter的更多相关文章

  1. Vue学习笔记十三：Vue+Bootstrap+vue-resource从接口获取数据库数据

    目录 前言 SpringBoot提供后端接口 Entity类 JPA操作接口 配置文件 数据库表自动映射,添加数据 写提供数据的接口 跨域问题 前端修改 效果图 待续 前言 Vue学习笔记九的列表案例 ...

  2. Vue学习笔记-Vue.js-2.X 学习(一)===>基本知识学习

    一  使用环境: windows 7 64位操作系统 二  IDE:VSCode/PyCharm 三  Vue.js官网: https://cn.vuejs.org/ 四  下载安装引用 方式1:直接 ...

  3. Vue学习笔记-Django REST framework3后端接口API学习

    一  使用环境 开发系统: windows 后端IDE: PyCharm 前端IDE: VSCode 数据库: msyql,navicat 编程语言: python3.7  (Windows x86- ...

  4. Vue学习笔记-vue-element-admin 前端学习

    一  使用环境 开发系统: windows 后端IDE: PyCharm 前端IDE: VSCode 数据库: msyql,navicat 编程语言: python3.7  (Windows x86- ...

  5. Vue学习笔记-2

    前言 本文非vue教程,仅为学习vue过程中的个人理解与笔记,有说的不正确的地方欢迎指正讨论 1.computed计算属性函数中不能使用vm变量 在计算属性的函数中,不能使用Vue构造函数返回的vm变 ...

  6. Vue学习笔记-1

    前言 本文不是Vue.js的教程,只是一边看官网Vue的教程文档一边记录并总结学习过程中遇到的一些问题和思考的笔记. 1.vue和avalon一样,都不支持VM初始时不存在的属性 而在Angular里 ...

  7. ASP.NET MVC学习笔记-----Filter

    ASP.NET MVC学习笔记-----Filter(1) Filter类型 接口 MVC的默认实现 Description Authorization IAuthorizationFilter Au ...

  8. vue 学习笔记（二）

    最近公司赶项目,一直也没时间看 vue,之前看下的都快忘得差不多了.哈哈哈,来一起回顾一下vue 学习笔记(一)后,继续向下看嘛. #表单输入绑定 基础用法 v-model 会忽略所有表单元素的 va ...

  9. ASP.NET MVC学习笔记-----Filter(2)

    接上篇ASP.NET MVC学习笔记-----Filter(1) Action Filter Action Filter可以基于任何目的使用,它需要实现IActionFilter接口: public ...

随机推荐

  1. mathJax基础语法-0基础开始，（这是网上抄来的如果有权限和版权问题联系本人处理，仅供学术参考）

  2. SQL 将变量定义为Table类型

    ),a2 ,),a4 DATETIME,a5 UNIQUEIDENTIFIER) ,11.22,GETDATE(),NEWID()) ,11.22,GETDATE(),NEWID()) ,11.22, ...

  3. MySQL 常用命令（Linux）

    一.查看MySQL服务 MySQL服务应该随开机自动启动的.正常情况下,查看开机自动启动的服务使用chkconfig命令,如下: chkconfig --list 实际mysql是否真正启动,是否真正 ...

  4. 记一次线上Zabbix对Redis监控实录

    前言:Redis作为缓存服务器我想大家都比较的熟悉,那么,如果想要更好的维护和监控,那么我们会对其redis服务器统一监控起来,如何监控呢?如果在生产环境一台服务器部署多个redis,这样就会出现多个 ...

  5. IMCASH：卖掉了比特币回老家生活的现在怎么样了？

    2012年大学毕业后,我不经意间接触到了比特币,抱着本人对新鲜事物的好奇心和知乎上的一些流言蜚语,我把一部分上学时期辛苦兼职赚的钱换成了比特币,当时真的觉得自己中了邪,不知道为什么会入这个坑. 比特币 ...

  6. react生命周期，中间件、性能优化、数据传递、mixin的使用

    https://github.com/lulujianglab/blog/issues/34 一.生命周期 1,初始化的执行顺序,初始生命周期执行过程详解 class initSate extends ...

  7. Pandas常用功能总结

    1.读取.csv文件 df2 = pd.read_csv('beijingsale.csv', encoding='gb2312',index_col='id',sep='\t',header=Non ...

  8. HDU 6437 Problem L.Videos (最大费用)【费用流】

    <题目链接> 题目大意: 一天有N个小时,有m个节目(每种节目都有类型),有k个人,连续看相同类型的节目会扣w快乐值.每一种节目有都一个播放区间[l,r].每个人同一时间只能看一个节目,看 ...

  9. 畅通工程续 -- HDU 1874 floyd

    题目大意: 现在,已知起点和终点,请你计算出要从起点到终点,最短需要行走多少距离. 思路: floyd算法模板题,这是一个牺牲空间换取时间的算法,本质是动态规划. AC代码: #include < ...

  10. [CF1140C]Playlist

    Description: 给你n首歌,每首歌有一个长度\(a_i\)和美丽度\(b_i\) 现在可以选出最多k首,动听值为\(\sum a_i*min_{\sum b_i}\) Hint: \(n \ ...