Vue 学习笔记 — filter
对将要插入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的更多相关文章
- Vue学习笔记十三：Vue+Bootstrap+vue-resource从接口获取数据库数据
目录 前言 SpringBoot提供后端接口 Entity类 JPA操作接口 配置文件 数据库表自动映射,添加数据 写提供数据的接口 跨域问题 前端修改 效果图 待续 前言 Vue学习笔记九的列表案例 ...
- Vue学习笔记-Vue.js-2.X 学习(一)===>基本知识学习
一 使用环境: windows 7 64位操作系统 二 IDE:VSCode/PyCharm 三 Vue.js官网: https://cn.vuejs.org/ 四 下载安装引用 方式1:直接 ...
- Vue学习笔记-Django REST framework3后端接口API学习
一 使用环境 开发系统: windows 后端IDE: PyCharm 前端IDE: VSCode 数据库: msyql,navicat 编程语言: python3.7 (Windows x86- ...
- Vue学习笔记-vue-element-admin 前端学习
一 使用环境 开发系统: windows 后端IDE: PyCharm 前端IDE: VSCode 数据库: msyql,navicat 编程语言: python3.7 (Windows x86- ...
- Vue学习笔记-2
前言 本文非vue教程,仅为学习vue过程中的个人理解与笔记,有说的不正确的地方欢迎指正讨论 1.computed计算属性函数中不能使用vm变量 在计算属性的函数中,不能使用Vue构造函数返回的vm变 ...
- Vue学习笔记-1
前言 本文不是Vue.js的教程,只是一边看官网Vue的教程文档一边记录并总结学习过程中遇到的一些问题和思考的笔记. 1.vue和avalon一样,都不支持VM初始时不存在的属性 而在Angular里 ...
- ASP.NET MVC学习笔记-----Filter
ASP.NET MVC学习笔记-----Filter(1) Filter类型 接口 MVC的默认实现 Description Authorization IAuthorizationFilter Au ...
- vue 学习笔记（二）
最近公司赶项目,一直也没时间看 vue,之前看下的都快忘得差不多了.哈哈哈,来一起回顾一下vue 学习笔记(一)后,继续向下看嘛. #表单输入绑定 基础用法 v-model 会忽略所有表单元素的 va ...
- ASP.NET MVC学习笔记-----Filter(2)
接上篇ASP.NET MVC学习笔记-----Filter(1) Action Filter Action Filter可以基于任何目的使用,它需要实现IActionFilter接口: public ...
随机推荐
- Day04.a（对象类型的转换，多态）
对象类型的转换 Dog dog = new Dog(); 通常情况下,对象(new Dog())类型和引用(dog)类型是相同的,当引用类型和对象类型不一致时,就需要类型转换. 向上转型:将较具体的类 ...
- 2018-2019-2 20165314『网络对抗技术』Exp5：MSF基础应用
一.原理与实践说明 1.实践内容 本实践目标是掌握metasploit的基本应用方式,重点常用的三种攻击方式的思路.具体需要完成: 一个主动攻击实践,如ms08-067; (1分) 一个针对浏览器的攻 ...
- Cross-Origin Resource Sharing（CORS）详解，CORS详解，CORS原理分析
Keywords CORS, 跨域,JS跨域调用,Ajax CORS 跨域,跨域详解,CORS跨域原理 Cross-Origin Resource Sharing详解 Cross-Origin Res ...
- python连接mysql数据库读取数据
#-*- coding:utf-8 -*- #Author:'Lmc' #DATE: 2019/4/28/0028 上午 11:22:47 #FileName:test.PY import pymys ...
- 将source类中的属性值赋给target类中对应的属性
/** * 对象的属性值拷贝 * <p> * 将source对象中的属性值赋值到target对象中的属性,属性名一样,类型一样 * <p> * example: * <p ...
- Python3-Cookbook总结 - 第三章：数字日期和时间
第三章:数字日期和时间 在Python中执行整数和浮点数的数学运算时很简单的. 尽管如此,如果你需要执行分数.数组或者是日期和时间的运算的话,就得做更多的工作了. 本章集中讨论的就是这些主题. Con ...
- unity打包exe中的资源管理
给美术和产品用unity做一些exe工具,会频频遇到导入导出资源的情况. 首先所有的文件应该放在StreamingAssets文件夹下, 如果需要动态替换贴图,这样美术只要替换default.png就 ...
- C#代码总结01---如何清空页面上所有文本框的内容。（用于录入后的清空）
/// <summary> /// 清空页面上所有TextBox的内容.用于录入后的清空 /// </summary> /// <param name="top ...
- Git 通过ssh 配置基于Host的差异配置
Host gitlab.xxx.com HostName gitlab.xxx.com User user IdentityFile xxx\.ssh\id_rsa Host github.com H ...
- PyQt4转换ui为py文件需添加如下代码才可执行
1)转换ui为py 命令行进入ui文件所在文件夹,输入pyuic4 ui_name.ui > py_name.py即可 或新建ui2py.bat文件,写入: @echo off @cd /d & ...