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 ...
随机推荐
- CNN解析和模型分析
https://wenku.baidu.com/view/b0add84eb94ae45c3b3567ec102de2bd9605de8a.html?pn=51 http://www.cnblogs. ...
- Mac上重置mysql 5.7密码
Mac上重置mysql 5.7密码 >我的mac系统是osx 10.12 装完mysql5.7之前根本登录不上,网上说用DMG方式装完后,后弹出一个框,上面会有临时密码,但是我安装的时候却手一抖 ...
- java爬虫实现爬取百度风云榜Top10
最近在项目中遇到了java和python爬虫进行程序调用和接口对接的问题, 刚开始也是调试了好久才得出点门道. 而后,自己也发现了爬虫的好玩之处,边想着用java来写个爬虫玩玩,虽说是个不起眼的dem ...
- Security配置文件的基本配置及参数名详解
<?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.spr ...
- 记一个 dubbo中hessian2反序列化 Map 的一个问题
dubbo版本: 2.5.10 解决方案: 改用 "dubbo" 序列化方式 (但是 dubbo 方式也存在一个比较坑的问题 详见: Dubbo序列化多个CopyOnWriteAr ...
- Net Core Docker 容器部署，修改，保存
运行镜像 [root@localhost opt]# docker run -itd -p : microsoft/dotnet:latest 查看运行的docker [root@localhost ...
- Linux安装Tomcat-Nginx-FastDFS-Redis-Solr-集群——【第六集之补充：文本编辑器vi/vim】
一:vi/vim的基本使用流程,掌握这三个步骤就算是入门vi或者vim.接下来的学习都是对vim命令和使用技巧的掌握,这要求各位自己去记忆.因为很少使用到某些命令,自然我们经常忘记这些命令,所以一旦忘 ...
- 032 Java再次总结
1.大纲 多线程怎么用的,线程池,事务,传播机制与隔离级别,反射,泛型,数据库引擎的区别,数据库merge,窗口函数,fastJson,JVM调优,GC钩子,Linux的awk,shell,HashM ...
- 基于TensorFlow的手写中文识别（版本一）
具体效果实现: 第一次由于设备问题所以只训练了是一些个简单的字: 第二选了23个字训练了3000在字迹清晰下能够识别: 类似于默,鼠,鼓,这类文字也能识别,由于训练数据的问题,在测试的时候应尽量写在正 ...
- 如何修改build之后生成的文件结构和路径
因为公司项目结构的原因, 被要求要build之后的文件夹结构要修改为: dist (文件夹) statics (文件夹) mobile (文件夹) ----> 存放原本 build 之后存在 ...