<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<script src='https://unpkg.com/vue/dist/vue.js'></script>
<title></title>
</head>
<body>
<div id='app'>
<p>{{username|strip("你好")}}</p>
</div>
<script>
Vue.filter("strip",function(value,string){
return value.replace(" ",string)
}), new Vue({
el:'#app',
data:{
username:"空 格"
}
}
)
</script>
</body>
</html>

  

## 过滤器:
1. 使用:`{{username|strip}}`、`<a :href="url|strip">百度</a>`。
2. 定义:都是定义一个函数,这个函数的第一个参数永远都是被过滤的那个变量
  * 局部定义:在组件中添加一个`filters`,然后在`filters`中添加过滤器。
  * 全局定义:通过`Vue.filter('过滤器的名称',函数)`。
3. 传参:如果在使用过滤器的时候还需要传递额外的参数,那么可以在定义过滤器的时候,提供其他的参数。在使用的时候直接跟普通函数一样传递就可以了。

vue学习18-过滤器的更多相关文章

  1. Vue学习之过滤器和自定义指令小结(三)

    过滤器: 过滤是一个数据经过了这个过滤之后出来另一样东西,可以是从中取得你想要的,或者给那个数据添加点什么装饰.过滤器就是过滤用的工具.渲染数据用的!!! 我们需要知道的是: 1.Vue中的过滤器不能 ...

  2. vue学习目录 vue初识 this指向问题 vue组件传值 过滤器 钩子函数 路由 全家桶 脚手架 vuecli element-ui axios bus

    vue学习目录 vue学习目录 Vue学习一之vue初识 Vue学习二之vue结合项目简单使用.this指向问题 Vue学习三之vue组件 Vue学习四之过滤器.钩子函数.路由.全家桶等 Vue学习之 ...

  3. day 83 Vue学习四之过滤器、钩子函数、路由、全家桶等

    Vue学习四之过滤器.钩子函数.路由.全家桶等   本节目录 一 vue过滤器 二 生命周期的钩子函数 三 vue的全家桶 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 Vue的过滤 ...

  4. Vue学习之路第十八篇:私有过滤器的使用

    1.上篇已经介绍了全局过滤器的使用,“全局”顾名思义就是一次定义处处使用,可以被一个页面里不同的Vue对象所使用,如下代码所示: <body> <div id="app1& ...

  5. VUE学习总结

    VUE学习总结 文档:https://cn.vuejs.org/v2/guide/ Webstorm的一些常用快捷键:1. ctrl + shift + n: 打开工程中的文件,目的是打开当前工程下任 ...

  6. day 83 Vue学习之五DIY脚手架、webpack使用、vue-cli的使用、element-ui

      Vue学习之五DIY脚手架.webpack使用.vue-cli的使用.element-ui   本节目录 一 vue获取原生DOM的方式 二 DIY脚手架 三 vue-cli脚手架的使用 四 we ...

  7. ASP.NET MVC+EF框架+EasyUI实现权限管理系列(18)-过滤器的使用和批量删除数据(伪删除和直接删除)

    原文:ASP.NET MVC+EF框架+EasyUI实现权限管理系列(18)-过滤器的使用和批量删除数据(伪删除和直接删除) ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇)   ...

  8. Vue学习-01

    1.vue 学习 v-bind:title 数据绑定 v-if 判断显示或者隐藏 <div id="app-3"> <p v-if="seen" ...

  9. vue学习心得

    前言 使用vue框架有一段时间了,这里总结一下心得,主要为新人提供学习vue一些经验方法和项目中一些解决思路. 文中谨代表个人观点,如有错误,欢迎指正. 环境搭建 假设你已经通读vue官方文档(文档都 ...

  10. Vue学习2:模板语法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. Data truncation: Truncated incorrect DOUBLE value错误的解决方案

    Data truncation: Truncated incorrect DOUBLE value错误的解决方案: 当在修改某条单位记录时,发生了Data truncation: Truncated ...

  2. element UI遇到的问题

    1. 在el-dialog中获取el-table的ref为undefined 问题:虽然设置了el-dialog的visible为true,但此时Dom并没有更新,因此在Dom更新前取不到el-tab ...

  3. Linux使用docker安装Jenkins 并进行jar包发布

    拉取镜像 docker pull jenkins/jenkins:lts 创建docker-compose.yml 文件 (主要习惯 也可以不用这种方式)  Linux安装docker-compose ...

  4. 【LeetCode】1471. 数组中的 k 个最强值 The k Strongest Values in an Array (Python)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 自定义排序 日期 题目地址:https://leetc ...

  5. 【LeetCode】555. Split Concatenated Strings 解题报告(C++)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 遍历 日期 题目地址:https://leetcode ...

  6. Matrix(poj2155)

    Matrix Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 25139   Accepted: 9314 Descripti ...

  7. 第二十八个知识点:什么是公钥密码学的IND-CCA安全定义?

    第二十八个知识点:什么是公钥密码学的IND-CCA安全定义? 我们将在这篇博客中讨论公钥加密的IND-CCA安全. IND-CCA安全代表选择明文的不可伪造性.这样的安全方案的思想就是给定一个密文,攻 ...

  8. Loss Landscape Sightseeing with Multi-Point Optimization

    目录 概 主要内容 代码 Skorokhodov I, Burtsev M. Loss Landscape Sightseeing with Multi-Point Optimization.[J]. ...

  9. [python]MergeTxt按列合并同一个文件下多个txt文件

    开发需求:应项目需要,要将记录成txt的实验数据进行按列合并(也即为不同文件上下合并),从而进行机器学习训练. 实验数据类似如此 模拟验证数据 1.txt *****1***** abcdefghij ...

  10. HTML网页设计基础笔记 • 【第8章 页面布局与规划】

    全部章节   >>>> 本章目录 8.1 表格布局 8.1.1 表格布局 8.2 流式布局 8.2.1 瀑布流布局 8.2.2 masonry 实现瀑布流布局 8.3 div ...