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 ...
随机推荐
- 【转】Python——plot可视化数据，作业8
Python——plot可视化数据,作业8(python programming) subject1k和subject1v的形状相同 # -*- coding: utf-8 -*- import sc ...
- W3CSchool闯关笔记(中级脚本算法)
坚持下去,编程是一门艺术,与君共勉!!! function sumAll(arr) { var result = 0; var sn = Math.min(arr[0] , arr[1]); var ...
- 处理 oracle 数据库导入报错“IMP-00058: 遇到 ORACLE 错误 942”
在导入数据文件的时候出现了下图错误: 经过多次百度搜索问题.得知问题错误方向: 仔细的查询了被导入数据的数据库的版本: 而 被导入的数据包 dmp 文件是从 oracle11g r2的版本导出的. 所 ...
- python 将png图片格式转换生成gif动画
先看知乎上面的一个连接 用Python写过哪些[脑洞大开]的小工具? https://www.zhihu.com/question/33646570/answer/157806339 这个哥们通过爬气 ...
- qt之数据库对照片的存取
需要确保数据库连接上 QOCI为驱动 //oracle 数据库连接 //需要在执行文件目录添加 oci.dll oraociei11.dll QSqlDatabase db = QSqlDatabas ...
- Linux-day1-上课笔记
命令的组成 命令关键字 [选项] [参数] 注意: 1. 通常情况下 选项- --连接 ls -l /etc 2. - 选项和选项之间是可以合并的 ls -ld /etc ls 罗列文件 常见的选 ...
- 【ABP.Net】1.创建项目&介绍框架结构
既然已经打开这个页面了,我就不介绍什么是ABP了.哈哈哈,如果想知道,请移驾.反正我是不说. 1.首先打开https://aspnetboilerplate.com/Templates 下载所需要的A ...
- SpringCloud使用Prometheus监控(基于Eureka)
本文介绍SpringCloud使用Prometheus,基于Eureka服务发现. 1.Prometheus介绍 在之前写过两篇有关Prometheus使用的文章,如下: <SpringBoot ...
- C++入门笔记（二）变量和基本类型
变量和基本类型 一.基本内置类型 1.除去布尔类型和扩展的字符型外,其他整型可以分为带符号的和无符号的. 2.与其他整型不同,字符型被分为了三种:char.signed char 和 unsigned ...
- windows下编译Boost
当前boost最新版本为1.55,下载地址:http://sourceforge.net/projects/boost/files/boost/1.55.0/或者从官网(www.boost.org)下 ...