vue：过滤器
一、过滤器
过滤器是vue中的一个特性，作用是用于对文本进行格式化的作用。
注意：在vue 1.0中有内置的过滤器，在2.0中去掉了内置过滤器，只有自定义过滤器
二、使用位置
过滤器只能应用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。例如：
<!--在双花括号中使用 格式：{{值 | 过滤器的名称}}-->
<div>{{3 | addZero}}</div>
<!--在v-bind中使用 格式：v-bind:id="值 | 过滤器的名称"-->
<div v-bind:id="1 | addZero">11</div>
三、分类
过滤器分为以下两种类型：
1、全局过滤器
示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>过滤器</title>
<!--引入vue.js-->
<script src="node_modules/vue/dist/vue.js" ></script>
<script>
window.onload=function(){
// 定义全局过滤器
Vue.filter("addZero",function(value){
// 如果value的值小于10则在前面添加0然后返回，否则直接返回value值
return value<10?"0"+value:value;
});
// 构建vue实例
new Vue({
el:"#my",
data:{
},
// 方法
methods:{ }
})
}
</script>
</head>
<body>
<div id="my">
<!--在双花括号中使用全局过滤器 格式：{{值 | 过滤器的名称}}-->
<div>{{3 | addZero}}</div>
<div>{{15 | addZero}}</div>
<!--在v-bind中使用全局过滤器 格式：v-bind:id="值 | 过滤器的名称"-->
<div v-bind:id="1 | addZero">11</div>
<div v-bind:id="12 | addZero">15</div>
</div>
</body>
</html>
效果：
2、本地过滤器
示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>过滤器</title>
<!--引入vue.js-->
<script src="node_modules/vue/dist/vue.js" ></script>
<script>
window.onload=function(){
// 定义全局过滤器
Vue.filter("addZero",function(value){
// 如果value的值小于10则在前面添加0然后返回，否则直接返回value值
return value<10?"0"+value:value;
});
// 构建vue实例
new Vue({
el:"#my",
data:{
},
// 方法
methods:{ },
// 定义本地过滤器
filters:{
roundNum:function(value){
// 四舍五入 小数点后保留两位
return value.toFixed(2);
},
roundNumWithPara:function(value,digit){
// 根据digit返回相应位数的小数
return value.toFixed(value,digit);
}
}
})
}
</script>
</head>
<body>
<div id="my">
<!--在双花括号中使用全局过滤器 格式：{{值 | 过滤器的名称}}-->
<div>{{3 | addZero}}</div>
<div>{{15 | addZero}}</div>
<!--在v-bind中使用全局过滤器 格式：v-bind:id="值 | 过滤器的名称"-->
<div v-bind:id="1 | addZero">11</div>
<div v-bind:id="12 | addZero">15</div>
<!--使用本地过滤器-->
<div>原始值：3.1415926，过滤后的值：{{3.1415926 | roundNum}}</div>
<!--保留小数点后3位-->
<div>原始值：3.1415926，过滤后的值：{{3.1415926 | roundNumWithPara(3)}}</div>
</div>
</body>
</html>
效果：
四、过滤器应用实例
1、使用过滤器实现省略号
代码示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>使用过滤器实现省略号</title>
<!--引入vue.js-->
<script src="node_modules/vue/dist/vue.js" ></script>
<script>
window.onload=function(){
// 构建vue实例
new Vue({
el:"#my",
data:{
msg:'hello world',
},
// 方法
methods:{ },
// 定义本地过滤器
filters:{
// 显示省略号
toShowEllipsis:function(value,len){
if(value ==='' || value=== undefined || value===null) return;
if(value.length >= len){
var str = value.substr(0,len);
return str + '...';
}else {
return value;
}
}
}
})
}
</script>
</head>
<body>
<div id="my">
<!--添加省略号 12345...-->
<input type="text" v-model="msg" >
{{msg | toShowEllipsis(6)}}
</div>
</body>
</html>
效果：
2、使用过滤器处理时间戳
代码示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>使用过滤器处理时间戳</title>
<!--引入vue.js-->
<script src="node_modules/vue/dist/vue.js" ></script>
<script>
window.onload=function(){
// 构建vue实例
new Vue({
el:"#my",
data:{
curTime:1546181790
},
// 方法
methods:{ },
// 定义本地过滤器
filters:{
// 处理时间戳 将时间戳转换成具体时间
toTimeStamp:function(value){
//d 表示日期 t 日期和时间
var d = new Date(value*1000);
return d.getFullYear()+'-'+(d.getMonth()+1)+'-'+d.getDate()+" "+d.getHours()+":"+d.getMinutes()+":"+d.getSeconds()
} }
})
}
</script>
</head>
<body>
<div id="my">
<!--时间戳-->
<p>当前时间：{{curTime | toTimeStamp }}</p>
</div>
</body>
</html>
效果：
vue：过滤器的更多相关文章
- Vue 过滤器的使用
Vue官方文档是这样说的:Vue过滤器用于格式化一些常见的文本. 在实际项目中的使用: 定义过滤器 在src定义一个filter.js文件,里面定义过滤器函数,在最后要使用 exprot defaul ...
- vue 过滤器filters的使用以及常见报错小坑（Failed to resolve filter）
今天使用vue 过滤器中发现一个小坑,网上查到的大都是不正确的解决方法,故分享给大家: 原错误代码: // 过滤器 filter:{ FdishList:function(value){ if (!v ...
- vue过滤器微信小程序过滤器和百度智能小程序过滤器
因为最近写了微信小程序和百度小程序,用到了过滤器,感觉还挺好用的,所以就来总结一下,希望能帮到你们. 1. 微信小程序过滤器: 1.1:首先建一个单独的wxs后缀的文件,一般放在utils文件夹里面. ...
- 换个角度使用VUE过滤器
换个角度使用VUE过滤器 过滤器在Vue中的主要用于文本格式化,如小写转大小,日期格式化等操作.官方对这个功能介绍也很简单,不过确实很简单,就一个函数而已.但最近在做两款APP时,遇到一些特殊的需求. ...
- 3.Vue过滤器
1.概念: Vue.js 允许你自定义过滤器,可被用作一些常见文本的格式化,过滤器可以用在两个地方:mustache 插值和 v-bind 表达式.过滤器应该被添加在 JavaScript 表达式的尾 ...
- 黑马vue---31-32、vue过滤器实例
黑马vue---31-32.vue过滤器实例 一.总结 一句话总结: vue内部的东西,无论是过滤器还是组件,都是键值对的方式 1.过滤器的定义语法? Vue.filter('过滤器的名称', fun ...
- 带你掌握Vue过滤器filters及时间戳转换
摘要:Vue的filters过滤器是比较常见的一个知识点,下面我将结合时间戳转换的例子带你快速了解filters的用法. 本文分享自华为云社区<三分钟掌握Vue过滤器filters及时间戳转换& ...
- Vue - 过滤器
1.内部过滤器 1):字母操作: ---- 针对字符串 A:capitalize B:uppercase C:lowercase 2):json过ingfy滤器,可将表达式的值转化为Json字符串,本 ...
- Vue 过滤器与计算属性
过滤器 V1.x 版本 过滤器基础 过滤器是一个通过输入数据,能够及时对数据进行处理并返回一个数据结果的简单函数.Vue有很多很便利的过滤器,可以参考官方文档,http://cn.vuejs.org/ ...
- 第六节：Vue过滤器的用法和自定义过滤器
1.过滤器的用法,用 '|' 分割表达式和过滤器. 例如:{{ msg | filter}} {{msg | filter(a)}} a就标识filter的一个参数. 用两个过滤器:{{ ...
随机推荐
- 增强for 可以用于ArrayList
ArrayList<Integer> list=null; for(int i : list){ sum+=i; }
- AGC027 C - ABland Yard 拓扑排序
目录 题目链接 题解 代码 题目链接 AGC027 C - ABland Yard 题解 发现有解的充要条件是有一个形为AABBAABBAABB的环 此时每一个点至少与两个不同颜色的点相连 对于初始不 ...
- loj#2016. 「SCOI2016」美味
题目链接 loj#2016. 「SCOI2016」美味 题解 对于不带x的怎么做....可持久化trie树 对于带x,和trie树一样贪心 对于答案的二进制位,从高往低位贪心, 二进制可以表示所有的数 ...
- ECS部署Django之旅
引言: 在完成了一个基于Django的博客系统后,我目前着手将我的博客系统部署到阿里云的ECS服务器上. 之所以选择云服务器,在我还在lab的时候,还是学生所以比较便宜一年100软妹币的样子,性价比极 ...
- JavaScript_原型和继承(2017-03-15)
一.函数创建过程 在了解原型链之前我们先来看看一个函数在创建过程中做了哪些事情,举一个空函数的例子: function A() {}; 当我们在代码里面声明这么一个空函数,js解析的本质是(肤浅理解有 ...
- 喵哈哈村的魔法考试 Round #11 (Div.2) 题解
喵哈哈村的星星与月亮(一) 打表发现答案就等于a*b%mod 注意a*b可能爆longlong #include<bits/stdc++.h> using namespace std; c ...
- Python爬虫实例：糗百
看了下python爬虫用法,正则匹配过滤对应字段,这里进行最强外功:copy大法实践 一开始是直接从参考链接复制粘贴的,发现由于糗百改版导致失败,这里对新版html分析后进行了简单改进,把整理过程记录 ...
- class-dump 使用
转:class-dump 使用 class-dump 官网地址:这里 我这里下载的是 class-dump-3.5.dmg 版本的.双击.dmg 文件,将 拉倒 /usr / local / bin ...
- Asp.Net JsonResult重写
在Json序列化工具中,Newtonsoft.Json 的工具包相对比较好用. 对于循环引用.序列化格式.时间格式等都提供了可配置. 如果想重写Mvc 自带 JsonResult 返回结果,提供了2中 ...
- Android四大组件应用系列——使用BroadcastReceiver和Service实现倒计时
一.问题描述 Service组件可以实现在后台执行一些耗时任务,甚至可以在程序退出的情况下,让Service在后台继续保持运行状态.Service分本地服务和远程服务,Local地服务附在主进程上的m ...