Vue-filter指令全局过滤和稀有过滤
简单介绍一下过滤器，顾名思义，过滤就是一个数据经过了这个过滤之后出来另一样东西，可以是从中取得你想要的，或者给那个数据添加点什么装饰，那么过滤器则是过滤的工具。例如，从['abc','abd','ade']数组中取得包含‘ab’的值，那么可通过过滤器筛选出来‘abc’和‘abd’；把‘Hello’变成‘Hello World’，那么可用过滤器给值‘Hello’后面添加上‘ World’；或者把时间节点改为时间戳等等都可以使用过滤器。
全局过滤器：
Vue.filter('globalFilter', function (value) {
return value + "!!!"
})
<body>
<div class="box">
<!-- | 代表管道，过滤器语法 后面msopt是过滤器的名字 -->
<p>{{ ms | msopt('疯狂')}}</p>
</div> <script> // 标准函数
// var a=function (args){
// alert("hello word");
// };
// 箭头函数
// var a=()=>{
// alert("hello word");
// }; // 全局过滤 filter 第一个参数是必须的，第一个参数就是{{ms |msopt}}"|"前面的
// 定义一个全局的过滤器 filter名字叫做msopt
//这里面回调函数 function(){return dd.replace()} 简写成了箭头函数
// 而且 <p>{{ ms | msopt('疯狂'')}}</p> 我们需要自己来出传递这个参数
// 我们知道filter 里面的回调函数 第一个参数是写死的，我们只能用第二个
Vue.filter('msopt', (dd,arg)=>{
return dd.replace('/单纯/g',arg);
// /单纯/g 正则表达式 g 是全局搜索
}) var vm=new Vue({
el:'.box',
data:{
ms:'单纯的我，就喜欢单纯的问问,你单纯吗？'
},
methods: { },
})
</script>私有过滤器（filters）
<tbody>
<tr>
<td>{{ jj | appmeg("不上班") }}</td>
</tr>
</tbody>
</table> <script> var vm=new Vue({
el:'.table',
data:{
jj:'今天星期六' },
methods:{ },
//定义自定义(私有)的过滤器
// filters:{
// // appmeg 私有过滤器的名字 a 是必须参数 代表要过滤的字符串
// 如果存在私有和全局过滤器，采用就近原则先用私有的过滤器
// appmeg:function(a){
// return a+'sdfsdfsdf'; // } // } // 带有参数的自定义filter
filters:{
// appmeg 私有过滤器的名字 a 是必须参数 代表要过滤的字符串
appmeg:function(a,b){
return a+'sdfsdfsdf'+b; } } });
</script>
Vue-filter指令全局过滤和稀有过滤的更多相关文章
- Vue 全局过滤和局部过滤
局部过滤器(放在组件里) filters: { //局部过滤器 FormattingMoney:value=>{ return value==null? '0' : value/100 } }, ...
- vue中自定义指令vue.direvtive，自定义过滤器vue.filter(),vue过渡transition
自定义指令 默认设置的核心指令( v-model,v-bind,v-for,v-if,v-on等 ),Vue 也允许注册自定义指令.注意,在 Vue2.0 里面,代码复用的主要形式和抽象是组件——然而 ...
- 数组filter方法对数组元素进行过滤
Array.prototype.filter对数组中元素进行过滤 /** * @method reduce * @param {number} item 当前迭代的数组元素 * @param {num ...
- automapper如何全局配置map条件过滤null值空值对所有映射起效
原文 automapper如何全局配置map条件过滤null值空值对所有映射起效 我们在使用automapper的时候经常会遇到这样的问题:假设展示给用户的数据我们用UserDto类,User类就是我 ...
- 机器学习实战基础（十五）：sklearn中的数据预处理和特征工程（八）特征选择 之 Filter过滤法（二） 相关性过滤
相关性过滤 方差挑选完毕之后,我们就要考虑下一个问题:相关性了. 我们希望选出与标签相关且有意义的特征,因为这样的特征能够为我们提供大量信息.如果特征与标签无关,那只会白白浪费我们的计算内存,可能还会 ...
- Vue | 自定义指令和动态路由实现权限控制
功能概述: 根据后端返回接口,实现路由动态显示 实现按钮(HTML元素)级别权限控制 涉及知识点: 路由守卫 Vuex使用 Vue自定义指令 导航守卫 前端工程采用Github开源项目Vue-elem ...
- VUE笔记 - 过滤器 Vue.filter 形参默认值 @keyup.f2 自定义按键修饰符
过滤器函数的传参: 第一个参数 A 是固定的,表示要过滤之前的内容. 第二个参数 B,表示要把原本的内容 A 过滤成 B. 写函数内容时, 这里第二处只写个参数. 实际的值要写到管道符调用函数的括号内 ...
- 解读vue filter
1.全局filter, 全局的过滤一般在main.js里面使用 <div id="app"> <div> {{testVal | filVal(10,30) ...
- Vue filter介绍及详细使用
Vue filter介绍及其使用 VueJs 提供了强大的过滤器API,能够对数据进行各种过滤处理,返回需要的结果. Vue.js自带了一些默认过滤器例如: capitalize 首字母大写 uppe ...
随机推荐
- Spring cloud微服务安全实战-4-7重构代码以适应真实环境
现在有了认证服务器,也配置了资源服务器.也根据OAuth协议,基于令牌认证的授权也跑通了.基本的概念也有了简单的理解. 往下深入之前,有几个点,还需要说一下 使用scopes来控制权限,scopes可 ...
- Qt编写自定义控件60-声音波形图
一.前言 这个控件源自于一个音乐播放器,在写该音乐播放器的时候,需要将音频的数据转换成对应的频谱显示,采用的fmod第三方库来处理(fmod声音系统是为游戏开发者准备的革命性音频引擎,非常强大和牛逼) ...
- 让Chrome浏览器抓包接口数据秒变 python 代码
简介 uncurl是一个库,允许您将curl请求转换为使用requests 的python代码.由于Chrome网络检查器具有的“copy as cURL”,因此该工具对于用python重新创建浏览器 ...
- 生成有目录的pdf
生成有目录的pdf 觉得有用的话,欢迎一起讨论相互学习~Follow Me 参考文献 https://jingyan.baidu.com/article/ff411625c2153512e48237a ...
- Python核心编程(第二版)PDF
Python核心编程(第二版) 目录 第1部分 Python核心第1章 欢迎来到Python世界1.1 什么是Python1.2 起源1.3 特点1.3.1 高级1.3.2 面向对象1.3.3 可升级 ...
- HLSFFmpegBuilder适用于hls协议的构造器 没具体测试
import com.google.common.collect.ImmutableList; import net.bramp.ffmpeg.builder.FFmpegBuilder; impor ...
- idea能用下划线替换红色报错吗？我色弱，用idea简直太痛苦了
看看下图的idea,如果某个类的包路径没有引进来,使用颜色来提示,这对于色弱的程序员简直是一种折磨,有没有可以改成eclipse的那种报错提示方式? 个人感觉idea真的没有eclipse友好,也许是 ...
- C#给图片加水印,可设置透明度
C#给图片加水印,可设置透明度,设置水印的位置可以看一下上一篇哈 /// <summary> /// Creating a Watermarked Photograph with GDI+ ...
- vue-cli3.0和element-ui及axios的安装使用
一.利用vue-cli3快速搭建vue项目 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@vue/cli 全局安装的 npm 包,提供了终端里的vue命令( ...
- Dijkstra算法(朴素实现、优先队列优化)
Dijkstra算法只能求取边的权重为非负的图的最短路径,而Bellman-Ford算法可以求取边的权重为负的图的最短路径(但Bellman-Ford算法在图中存在负环的情况下,最短路径是不存在的(负 ...