过滤器函数的传参:

第一个参数 A 是固定的,表示要过滤之前的内容。

第二个参数 B,表示要把原本的内容 A 过滤成 B。 写函数内容时, 这里第二处只写个参数。

实际的值要写到管道符调用函数的括号内。 如下:

{{ item.ctime | dateFormat('yyyy-mm-dd') }}
 Vue.filter('过滤器的名称', function (A, B) {};

这里函数调用的时候没有传参, 但是在函数里写了一个默认值。

形参的默认值: 当不传入参数时,默认使用形参里的默认值 。

{{ item.ctime | dateFormat( ) }}

Vue.filter('dateFormat', function (dateStr, pattern = "") {}
<body>
<div id="app">
<p>{{msg | msgFormat('疯狂233') | test}}</p>
</div> <script>
Vue.filter('msgFormat', function(msg, arg){
// return msg.replace('单纯', '邪恶') // replace 要和正则搭配使用,否则无法匹配全局。
// return msg.replace(/单纯/g, '邪恶') // ! 注意这里正则的使用。
return msg.replace(/单纯/g, arg);
}); // 过滤器可以多次调用。
// {{msg | msgFormat('疯狂233') | test}}
// 初始信息被中间的过滤, 返回第二次的结果,第二次的结果又被第三次处理再返回。
Vue.filter('test', function(msg){
return msg + '======='
}); var vm = new Vue({
el:'#app',
data:{
msg:'曾经,我也是一个单纯的少年,单纯的我,傻傻地问,谁是世界上最单纯的男人。'
},
methods:{
}
});
</script>
</body>

自定义按键修饰符

Vue.config.keyCodes.f2 = 113;

事件调用

@keyup.f2

VUE笔记 - 过滤器 Vue.filter 形参默认值 @keyup.f2 自定义按键修饰符的更多相关文章

  1. 第二章 Vue快速入门-- 28 自定义按键修饰符

    事件处理-按键修饰符 js 里面的键盘事件对应的键码 <!DOCTYPE html> <html lang="en"> <head> <m ...

  2. Vue 自定义按键修饰符

    如点击F2 触发某个事件 <input type="button" name="" id="" value="添加" ...

  3. 「Vue」自定义按键修饰符

    vue.config.keyCodes.f2 = 113 设置完成后就可以绑定f2的按键操作@keyup.f2="add" 自带的有enter esc delete 空格 上下左右 ...

  4. 从零开始学 Web 之 Vue.js(二)过滤器,按键修饰符,自定义指令

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  5. Vue学习笔记十一:按键修饰符和自定义指令(钩子函数)

    目录 padStart:补位 按键修饰符 Vue提供的按键修饰符 自定义按键修饰符 自定义指令 自定义指令的使用 钩子函数 钩子函数参数 使用钩子函数的bingding参数 私有自定义指令 钩子函数的 ...

  6. Vue.js-06:第六章 - 按键修饰符的使用

    一.前言  上周末的时候,准备试试将 ASP.NET Core 的项目部署到 CentOS 服务器上,结果在一个接一个坑里面跳,最后 Supervisor 守护程序还是有问题,于是,采用重装系统大招, ...

  7. vue.js(13)--按键修饰符

    v-on监听事件时可添加按键修饰符 <!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` --> <input v-on:keyup.enter=&q ...

  8. vue select下拉框绑定默认值

    vue select下拉框绑定默认值: 首先option要加value值,以便v-model可以获取到对应选择的值 一.当没有绑定v-model,直接给对应的option加selected属性 二.当 ...

  9. 问题:C++形参默认值为什么一定要放在最后?

    问题:C++形参默认值为什么一定要放在最后? 1.会出现歧义! 2.从汇编角度看是怎么回事?   待解答!!

随机推荐

  1. Bootstrap Table 的用法

    记录下 Bootstrap Table 的用法,备忘. <!DOCTYPE html> <html> <head> <meta charset="u ...

  2. selenium+python 安装使用

    一.序言 selenium官网selenium简单教程selenium完整教程python基础教程 二.安装python3 https://www.python.org/downloads/relea ...

  3. Java基础String的方法

    Java基础String的方法 字符串类型写法格式如下: 格式一: String 变量名称; 变量名称=赋值(自定义或传入的变量值); 格式二: String 变量名称=赋值(自定义或传入的变量值); ...

  4. 安装个wampserver 环境 执行php

    php代码执行要有相关环境. 在这里推荐一个环境工具.wampserver :内置了下面工具: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5 ...

  5. Linq案例

    1.牛刀小试 using System; using System.Collections.Generic; using System.Linq; using System.Text; using S ...

  6. C++的继承和Java继承的比较

    在C++中继承可分为公有继承(public)保护继承(protected)和私有继承(private),而在Java中默认只有一种继承(相当于C++中的公有继承)下面我们来看一段代码 #include ...

  7. Kinect 开发 —— 骨骼追踪进阶(上)

    Kinect传感器核心只是发射红外线,并探测红外光反射,从而可以计算出视场范围内每一个像素的深度值.从深度数据中最先提取出来的是物体主体和形状,以及每一个像素点的游戏者索引信息.然后用这些形状信息来匹 ...

  8. Spark存储体系

    作为分布式应用,Spark的数据存储在不同机器上.这就涉及到数据的传输,元数据的管理等内容.而且由于Spark可以利用内存和磁盘作为存储介质,这还涉及到了内存和磁盘的数据管理. Spark存储体系架构 ...

  9. Flex 转载

  10. Exchanging Partitions and Subpartitions with Tables--官方文档

    原文地址:https://dev.mysql.com/doc/refman/5.6/en/partitioning-management-exchange.html In MySQL 5.6, it ...