vue.js(12)--过滤器
vue中的全局过滤器与定义私有过滤器
全局过滤器
<!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>
<script src="../lib/vue.js"></script>
</head>
<body>
<div class="app">
<p>{{ msg | myFormat('哈哈哈哈哈') }}</p>
</div>
<script>
Vue.filter('myFormat',function(msg,n) { return msg.replace(/一/g,n)
})
var vm = new Vue({
el:'.app',
data:{
msg:'我是天下第一帅,我是天下第一美丽,我是天下第一可爱'
}
})
</script>
</body>
</html>
通过vue.filter('过滤器名称',function(参数){过滤方式,返回过滤后值})的方式定义一个全局过滤器。
使用过滤器的方式格式是{{ 要处理的字符 | 过滤器的名称}}
replace(‘替换字符’,‘被替换字符’)方法的使用
定义私有过滤器
<script>
var vm= new Vue({ //创建vue实例
el:'.app',
data:{
arr:[
{'id':1,'name':'iPhone','time':new Date()},
{'id':2,'name':'华为','time':new Date()},
{'id':3,'name':'OPPO','time':new Date()}
], //创建一些初始数据与格式
id:'',
name:'',
keywords:'' //初始化参数keywords为空
},
directives:{
focus:{
inserted:function(el) {
el.focus()
}
}
},//自定义指令
filters:{
timeFormat:function (dataStr) {
var myData=new Date(dataStr)
var y=myData.getFullYear()
var m=(myData.getMonth() + 1).toString().padStart(2,'0')
var d=myData.getDate().toString().padStart(2,'0')
var h=myData.getHours().toString().padStart(2,'0')
var mm=myData.getMinutes().toString().padStart(2,'0')
var s=myData.getSeconds().toString().padStart(2,'0')
return `${y}-${m}-${d} ${h}:${mm}:${s}++++++`
}
}//******创建一个私有过滤器******/
})
</script>
自定义私有过滤器形式:fliters:{过滤器名称:function (){}}
padStart方法在头部填充字符(字符串独有)实例、:时间字符串填充0
padEnd方法在尾部填充字符串
vue.js(12)--过滤器的更多相关文章
- vue.js之过滤器,自定义指令,自定义键盘信息以及监听数据变化
一.监听数据变化 1.监听数据变化有两种,深度和浅度,形式如下: vm.$watch(name,fnCb); //浅度 vm.$watch(name,fnCb,{deep:true}); //深度监视 ...
- vue.js基础知识篇(4):过滤器、class与style的绑定2
代码下载:网盘 欢迎私信 第一章:过滤器 过滤器是对数据进行处理并返回结果的函数. 1.语法 语法是使用管道符"|"进行连接.过滤器可以接收参数,跟在过滤器后面,带引号的参数被当做 ...
- 从零开始学 Web 之 Vue.js(二)过滤器,按键修饰符,自定义指令
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- vue.js学习 自定义过滤器使用(2)
gitHub地址: https://github.com/lily1010/vue_learn/tree/master/lesson05 一 自定义过滤器(注册在Vue全局) 注意事项: (1)全局方 ...
- Vue.js 源码分析(十一) 基础篇 过滤器 filters属性详解
Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化.过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持).过滤器应该被添加在 JavaScrip ...
- 最新vue.js完整视频教程12套
0.1智能社vuejs(1-11章全套) 0.2英文版learing vuejs 0.3Vue.js实战小米阅读开发 0.4走进Vue.js2.0 0.5Vuejs教程45节课 0.6Vue.js+N ...
- (12)打鸡儿教你Vue.js
组件 语法格式如下: Vue.component(tagName, options) <tagName></tagName> <div id="app" ...
- 12.Vue.js 表单
这节我们为大家介绍 Vue.js 表单上的应用. 你可以用 v-model 指令在表单控件元素上创建双向数据绑定. <div id="app"> <p>in ...
- Vue.js学习笔记(1)
数据的双向绑定(ES6写法) 效果: 没有改变 input 框里面的值时
随机推荐
- JDK1.8 LinkedList双向链表源码
序言 LinkedList是一个双向链表 也就是说list中的每个元素,在存储自身值之外,还 额外存储了其前一个和后一个元素的地址,所以也就可以很方便地根据当前元素获取到其前后的元素 链表的尾部元素的 ...
- PHP文件的上传和下载
1.使用PHP的创始人 Rasmus Lerdorf 写的APC扩展模块来实现(http://pecl.php.net/package/apc) APC实现方法: 安装APC,参照官方文档安装,可以使 ...
- CF786B Legacy 线段树优化建图 + spfa
CodeForces 786B Rick和他的同事们做出了一种新的带放射性的婴儿食品(???根据图片和原文的确如此...),与此同时很多坏人正追赶着他们.因此Rick想在坏人们捉到他之前把他的遗产留给 ...
- R 动态定义变量名 assign
rm(list=ls()) library(GSVA) library(GSEABase) library(GSVAdata) library(msigdbr) library(org.Hs.eg.d ...
- RAM 大全-DRAM, SRAM, SDRAM的关系与区别
ROM和RAM指的都是半导体存储器,ROM是Read Only Memory的缩写,RAM是Random Access Memory的缩写.ROM在系统停止供电的时候仍然可以保持数据,而RAM通常都是 ...
- 【gym102222K】Vertex Covers(高维前缀和,meet in the middle)
题意:给定一张n点m边的图,点带点权,定义点覆盖的权值为点权之积,问所有点覆盖的权值之和膜q n<=36, 1<=a[i]<=1e9,1e8<=q<=1e9 思路:n&l ...
- hibernate class cast exception from object to ...
http://stackoverflow.com/questions/22548325/java-lang-classcastexception-cannot-be-cast-to-java-lang ...
- Linux shell - 重命名文件和文件夹(mv)
linux下重命名文件或文件夹的命令mv既可以重命名,又可以移动文件或文件夹. 例子:将目录A重命名为B mv A B 例子:将/a目录移动到/b下,并重命名为c mv /a /b/c
- DRF 组件
DRF组件中的认证 授权 频率限制 分页 注册器 url控件
- 几种 MyBatis 增强插件
1. mybatis-generator/mybatis-generator-gui 2. 通用mapper 3. mybatis-plus 4. fastmybatis 5. mybatis-enh ...