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 ...
随机推荐
- 射线法（1190 - Sleepwalking ）
题目:http://lightoj.com/volume_showproblem.php?problem=1190 参考链接:https://blog.csdn.net/gkingzheng/arti ...
- 1、js的基本对象和垃圾回收
js常用的基本类型:Undefined,null,string,number,boolen 还有一种复杂的数据类型 object.判断类型可以用 typeof. 确定值是否是有穷的,isFinite, ...
- ios自带的返回按键，点击不刷新页面
1.因为是微信端页面,需要获取用户基本信息和设置微信分享朋友圈等功能,ios自带的返回键没有这个功能,导致config配置不成功,该隐藏的按钮没有隐藏. 解决方法,在子页面添加一下js代码即可.链接的 ...
- selenium截图
文件结构 1.DateUtil.py # cncoding = utf-8 import time from datetime import datetime ''' 本文件主要用于获取当前的日期以及 ...
- STM32L1 串口相应驱动开发
初始化设置: GPIO_InitTypeDef GPIO_InitStructure; NVIC_InitTypeDef NVIC_InitStructure; USART_InitTypeDef U ...
- Python 包管理(PYPA)
Python包的管理可以通过Python 自带的管理 工具,例如:package-autoremove,package-list-packages, package-install 等,使用起来也非常 ...
- Nginx+DNS负载均衡实现
负载均衡有多种实现方法,nginx.apache.LVS.F5硬件.DNS等. DNS的负载均衡就是一个域名指向多个ip地址,客户访问的时候进行轮询解析 操作方法,在域名服务商解析的DNS也可以是第三 ...
- Hbase API 简单封装
>>>>>>>>>>>>>>>>>>>>>>>>> ...
- SVM原理 （转载）
1. 线性分类SVM面临的问题 有时候本来数据的确是可分的,也就是说可以用 线性分类SVM的学习方法来求解,但是却因为混入了异常点,导致不能线性可分,比如下图,本来数据是可以按下面的实线来做超平面分离 ...
- MySql由于编码问题，存储过程执行出错。
在存储过程后面加了一段话.红色部分 DELIMITER $$ USE `mysql_wispeed01-test1`$$ DROP PROCEDURE IF EXISTS `sp_crebillno` ...