VUE笔记 - 过滤器 Vue.filter 形参默认值 @keyup.f2 自定义按键修饰符
过滤器函数的传参：
第一个参数 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 自定义按键修饰符的更多相关文章
- 第二章 Vue快速入门-- 28 自定义按键修饰符
事件处理-按键修饰符 js 里面的键盘事件对应的键码 <!DOCTYPE html> <html lang="en"> <head> <m ...
- Vue 自定义按键修饰符
如点击F2 触发某个事件 <input type="button" name="" id="" value="添加" ...
- 「Vue」自定义按键修饰符
vue.config.keyCodes.f2 = 113 设置完成后就可以绑定f2的按键操作@keyup.f2="add" 自带的有enter esc delete 空格 上下左右 ...
- 从零开始学 Web 之 Vue.js（二）过滤器，按键修饰符，自定义指令
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- Vue学习笔记十一：按键修饰符和自定义指令(钩子函数)
目录 padStart:补位 按键修饰符 Vue提供的按键修饰符 自定义按键修饰符 自定义指令 自定义指令的使用 钩子函数 钩子函数参数 使用钩子函数的bingding参数 私有自定义指令 钩子函数的 ...
- Vue.js-06：第六章 - 按键修饰符的使用
一.前言 上周末的时候,准备试试将 ASP.NET Core 的项目部署到 CentOS 服务器上,结果在一个接一个坑里面跳,最后 Supervisor 守护程序还是有问题,于是,采用重装系统大招, ...
- vue.js（13）--按键修饰符
v-on监听事件时可添加按键修饰符 <!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` --> <input v-on:keyup.enter=&q ...
- vue select下拉框绑定默认值
vue select下拉框绑定默认值: 首先option要加value值,以便v-model可以获取到对应选择的值 一.当没有绑定v-model,直接给对应的option加selected属性 二.当 ...
- 问题：C++形参默认值为什么一定要放在最后？
问题:C++形参默认值为什么一定要放在最后? 1.会出现歧义! 2.从汇编角度看是怎么回事? 待解答!!
随机推荐
- Concurrent.Thread.js
(function(){ if ( !this.Data || (typeof this.Data != 'object' && typeof this.Data != 'functi ...
- React开发实时聊天招聘工具 -第二章
2-1 介绍React开发环境 npm install -g create-react-app xxx npm run eject 来配置webpack 2-2 ES6常用语法 其他 还有一些特性 ...
- vuex 快速入门( 基于vue2.0,vue1.0未知可否)
1.原理概述 2.用户登录例子解析: 由上图可以看到: 1.组件的数据是username,我们把它以name放在state中: 2.更改name发生在mutations的回调里,事件名字是showUs ...
- 兼容IE浏览器的canvas画线和圆圈
1.新建test.html文件,代码如下: <!DOCTYPE html><html><head> <meta charset="utf-8& ...
- Nginx缩略图和Fastdfs整合以及image_filter配置，7点经验结论和5个参考资料
以下是7点经验结论和5个参考资料 1.Nginx单独配置缩略图与Nginx和Fastdfs模块整合,配置是不一样的. 非整合模式的配置,类似这样的: location ~* /(\d+)\.(jpg ...
- hdu4253 Two Famous Companies --- 二分+MST
给n个点.m条边的图.每条边要么属于a公司,要么属于b公司.要求一颗最小生成树,条件是当中属于a公司的边数为k. 这题做法非常巧妙. 要求最小生成树,但有一定限制,搜索.贪心显然都不正确. 要是能找到 ...
- Linux下安装zip解压功能
liunx服务器上默认没有安装zip命令,所以使用时需安装:apt-get install zip 或 yum install zip linux安装unzip命令:apt-get install ...
- 项目: 更新(二) python 实现大概FTP的功能
服务器利用 socketserver 模块 构造, 实现了 多进程. 客户端仍然利用的是底层的 socket模块. 只不过进行了更深度的 解耦, 新加或者删除 某些功能 更方便 在上一个版本的基础上, ...
- CentOS6.5下的Nagios安装配置详解（图文）
最近因为,科研需要,接触上了Nagios,这里,我将安装笔记做个详解.为自己后续需要和博友们学习! VMware workstation 11 的下载 VMWare Workstation 11的安装 ...
- Node.js REPL(交互式解析器)
Node.js REPL(交互式解释器) Node 自带了交互式解释器,可以执行以下任务: 读取 - 读取用户输入,解析输入了Javascript 数据结构并存储在内存中. 执行 - 执行输入的数据结 ...