六、vue基础--过滤器定义
七、过滤器定义
1.使用:{{username|strip}}、<a :href="url|strip">百度</a>
2.定义:都是定义一个函数,这个函数的第一个参数永远是被过滤的那个变量
a.局部定义:在组件中添加一个filters,然后在filters中添加过滤器
b.通过Vue.filters('过滤器名称',函数)
3.传参:如果需要传参,可以在定义过滤器的时候,提供其他参数,在使用的时候直接跟普通函数一样传递就可以了。代码如下:
<div id='app'>
<!-- <p>{{username|strip("哈哈")}}</p> -->
<p>{{username|strip("哈哈")}}</p>
</div>
<script>
// Vue.filter("strip",function(value){
// return value.replace(" ","")
//去掉下面的空格,这个支持正则
Vue.filter("strip",function(value,string){
return value.replace(" ",string)
})
new Vue({
el:'#app',
data:{
username:"张三 李四"
}
})
</script>
未完。。。
六、vue基础--过滤器定义的更多相关文章
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十六 ║Vue基础:ES6初体验 & 模块化编程
缘起 昨天说到了<从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十五 ║ Vue前篇:JS对象&字面量&this>,通过总体来看,好像大家对这一块不是很 ...
- vue基础----过滤器filter
1.用的场景:一个功能在每个组件都能用,而computed虽然有缓存,但不能用在每一个组件,需要的话的每一个都需要写. 2.特点:改变数据的展示形式,不改变原有的形式 分为全局与局部的 <di ...
- 第二章 Vue快速入门-- 26 过滤器-定义私有过滤器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 第二章 Vue快速入门-- 25 过滤器-定义格式化时间的全局过滤器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十║Vue基础终篇:传值+组件+项目说明
缘起 新的一天又开始啦,大家也应该看到我的标题了,是滴,Vue基础基本就到这里了,咱们回头看看这一路,如果你都看了,并且都会写了,那么现在你就可以自己写一个Demo了,如果再了解一点路由,ajax请求 ...
- Vue 基础篇
Vue 基础篇 一.框架与库的区别 JQ库->DOM(DOM操作) + Ajax请求 art-template库->模板引擎 框架 -> 全方位.功能齐全 简易的DOM体验 + 发请 ...
- (day65、66)Vue基础、指令、实例成员、JS函数this补充、冒泡排序
目录 一.Vue基础 (一)什么是Vue (二)为什么学习Vue (三)如何使用Vue 二.Vue指令 (一)文本指令 (二)事件指令v-on (三)属性指令v-bind (四)表单指令v-model ...
- Vue基础语法-数据绑定、事件处理和扩展组件等知识详解(案例分析,简单易懂,附源码)
前言: 本篇文章主要讲解了Vue实例对象的创建.常用内置指令的使用.自定义组件的创建.生命周期(钩子函数)等.以及个人的心得体会,汇集成本篇文章,作为自己对Vue基础知识入门级的总结与笔记. 其中介绍 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十七 ║Vue基础:使用Vue.js 来画博客首页+指令(一)
缘起 书说前两篇文章<十五 ║ Vue前篇:JS对象&字面量&this>和 <十六 ║ Vue前篇:ES6初体验 & 模块化编程>,已经通过对js面向对 ...
随机推荐
- Feeding Time 【bfs求最大连通块】
题目链接:https://ac.nowcoder.com/acm/contest/1870/J 题目大意:求最大的连通块是多大 主要是为了防止自己忘记bfs怎么写..... #include<s ...
- Shuffle 机制
1. 概述 Map 方法之后,Reduce 方法之前的数据处理过程称之为 Shuffle. 2. Partition 分区 需求:要求将统计结果按照条件输出到不同文件中(分区).比如:将统计结果按照手 ...
- DRF图片路径问题的解决方法,网上爬取的图片放到ImageFiled自动带上域名
由于博客园不支持markdown,推荐下面的url访问 原创url: https://blog.csdn.net/weixin_42495873/article/details/89440437 - ...
- 【Python | opencv+PIL】常见操作(创建、添加帧、绘图、读取等)的效率对比及其优化
一.背景 本人准备用python做图像和视频编辑的操作,却发现opencv和PIL的效率并不是很理想,并且同样的需求有多种不同的写法并有着不同的效率.见全网并无较完整的效率对比文档,遂决定自己丰衣足食 ...
- 【Scratch】编程?一节课就教会你!其实我们不用一个个学习如何使用代码。
第199篇文章 老丁的课程 在很多教程里面,大家都喜欢把模块拿出来一个个讲述其功能. 这样做的好处是,可以把每个代码模块的功能讲的很清楚.但最最讨厌的问题也随之而来…… 举个例子,当你学习英语的时候, ...
- spark集群安装并集成到hadoop集群
前言 最近在搞hadoop+spark+python,所以就搭建了一个本地的hadoop环境,基础环境搭建地址hadoop2.7.7 分布式集群安装与配置 本篇博客主要说明,如果搭建spark集群并集 ...
- office2016激活码 最新各个版本 激活
office2016专业版激活密钥 Microsoft Office 2016 Pro Plus Retail 零售版序列号密钥: BHXN7-MQB36-MTHQ4-8MHKV-CYT97 Micr ...
- 十三、Vue中的computed属性
以下抄自https://www.cnblogs.com/gunelark/p/8492468.html 看了网上很多资料,对vue的computed讲解自己看的都不是很清晰,今天忙里抽闲,和同事们又闲 ...
- 基因组所三代单分子测序PacBio完成技术升级—超长读长助力基因组学研究
基因组所三代单分子测序PacBio完成技术升级—超长读长助力基因组学研究 2015-09-23 | 作者:所级中心基因组平台 张兵 [关闭] 近日,基因组所所级中心基因组平台三代单分子实时测序PacB ...
- JFinal(2)JFinal 学习资料
JFinal 学习资料 :http://pan.baidu.com/s/1hsOcQ0G 密码:7lq3 , jfinal社区收费会员内部部分资料,博主网络搜集而来