过滤器函数的传参：

第一个参数 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. Codefroces 822C Hacker, pack your bags!

    C. Hacker, pack your bags! time limit per test 2 seconds memory limit per test 256 megabytes input s ...

  2. Ubuntu系统下的多路径软件 DM Multipath 配置。

    Ubuntu系统下的多路径软件是操作系统自带的 DM Multipath工具.------------------------------------------------------------- ...

  3. [Python] isinstance() for checking object type

    isinstance("foo", str) isinstance(1, int) isinstance(4.0, float)

  4. JavaScript提高：006：ASP.NET使用easyUI TABS标签updatepanel

    前文使用了easyui的tab标签.切换问题,使用了session保存当前选中页,然后页面总体刷新时再切换至上次保存页码.那么使用updatepanel后,这个问题就非常好攻克了.http://blo ...

  5. 基于r-Kernel的LiteOS操作系统

    LiteOS是应用于资源受限的传感网络的一种基于线程的类UNIX操作系统.也就是说它跑在存储空间和RAM有限的超低电压微控制器上,这也是吸引我关注它的原因(在超低电压下系统更易出错).它採用r-ker ...

  6. Mysql第八天 分区与分表

    分区表 主要提供例如以下的特性,或者适合如此场景: 数据量非常大, 或者仅仅有表中最后的部分有热点数据.其它均为历史数据 分区表数据更easy维护,能够对独立的分区删除等操作 分区表的数据能够分布在不 ...

  7. es6 -- Iterator 和 for...of 循环

    1:Iterator(遍历器)的概念 JavaScript 原有的表示“集合”的数据结构,主要是数组(Array)和对象(Object),ES6 又添加了Map和Set.这样就有了四种数据集合,用户还 ...

  8. nginx配置静态文件服务器的一个特殊需求的探索和分享, nginx处理不同路径返回统一文件,nginx改写,跳转请求.

    最近在做一个前后端分离的个人博客,在做自己博客的时候有个想法,本来是打算用nginx作为静态文件服务器使用,django做后端程序. 我的前端页面用vue写的,结果用组件用嗨了,发现页面列表和 详情都 ...

  9. JNDI学习总结（4）——Tomcat下使用Druid配置JNDI数据源

    com.alibaba.druid.pool.DruidDataSourceFactory实现了javax.naming.spi.ObjectFactory,可以作为JNDI数据源来配置. 一.下载D ...

  10. 洛谷 P1255 数楼梯

    P1255 数楼梯 题目描述 楼梯有N阶,上楼可以一步上一阶,也可以一步上二阶. 编一个程序,计算共有多少种不同的走法. 输入输出格式 输入格式: 一个数字,楼梯数. 输出格式: 走的方式几种. 输入 ...