Vue全局过滤器的使用 运用在时间过滤 内容添加crud
过滤器的使用
msgFormt是你自己定义的过滤器方法,
Vue.filter是你自己定义的全局过滤器。没有s
过滤器要有返回值哈 用retuen
<div id="app">
<p>{{ msg | msgFormt }}</p>
<!-- msgFormt是一个过滤器 -->
</div> <script>
Vue.filter("msgFormt",function(msg){
return msg.replace(/单纯/g,"邪恶")
}) var vm=new Vue({
el:"#app",
data:{
msg:"我是一个单纯的少年,单纯的我,傻傻的问,谁是单纯的人"
}
})
</script>
最后在页面输出 它会将原来的类容替换了
我是一个邪恶的少年,邪恶的我,傻傻的问,谁是邪恶的人
<div id="app">
<!--通过传递参数---可以随意的替换值-->
<p>{{ msg | msgFormt("飞宇") }}</p> <!-- msgFormt是一个过滤器 -->
</div> <script>
//定义一个全局过滤器---
Vue.filter("msgFormt",function (msg,th) {
return msg.replace(/单纯/g,th)
}); vm=new Vue({
el:"#app",
data:{
msg:"单纯的我,单纯的问,谁是单纯的人"
}
});
最后输出 飞宇的我,飞宇的问,谁是飞宇的人
Vue全局过滤器的使用 运用在时间过滤 内容添加crud的更多相关文章
- vue 全局过滤器(单个和多个过滤器)
参考: https://www.cnblogs.com/liujn0829/p/8622960.htmlhttps://blog.csdn.net/z8735058/article/details/7 ...
- Asp.Net MVC4中的全局过滤器,
可以对整个项目进行全局监控. 新建一个MVC4项目,可以在global.asax文件中看到如下代码: FilterConfig.RegisterGlobalFilters(GlobalFilters ...
- C#面试题(转载) SQL Server 数据库基础笔记分享(下) SQL Server 数据库基础笔记分享(上) Asp.Net MVC4中的全局过滤器 C#语法——泛型的多种应用
C#面试题(转载) 原文地址:100道C#面试题(.net开发人员必备) https://blog.csdn.net/u013519551/article/details/51220841 1. . ...
- Asp.Net MVC4中的全局过滤器
可以对整个项目进行全局监控. 新建一个MVC4项目,可以在global.asax文件中看到如下代码: FilterConfig.RegisterGlobalFilters(GlobalFilters ...
- vue自定义过滤器的创建和使用
1.简单介绍 过滤器的作用:实现数据的筛选.过滤.格式化. 过滤器的本质是一个有参数,有返回值的方法. 过滤器可以用在两个地方:双花括号插值和v-bind表达式(后者从2.1.0+开始支持 ...
- MVC全局过滤器
Asp.NET MVC4中的全局过滤器,可以对整个项目进行全局监控. 新建一个MVC4项目,可以在global.asax文件中看到如下代码: FilterConfig.RegisterGlobalF ...
- 第二章 Vue快速入门-- 25 过滤器-定义格式化时间的全局过滤器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- Vue中全局过滤器期与局部过滤器期的使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue 项目中添加全局过滤器以及全局混合mixin
可以在.vue文件中定义局部使用的过滤器 export default{ data(){ return [] }, filters:{ toUpperCase:function(value){ ret ...
随机推荐
- C# FlagAttriute 的 小妙招
FlagAttriute ,指示可将枚举视为位域(即一组标志). 官网中文解说:https://docs.microsoft.com/zh-cn/dotnet/api/system.flagsattr ...
- Docker系列03-容器Docker镜像的使用
Docker镜像的使用前两个章节,介绍了容器的相关基础知识,这章我们介绍镜像的简单使用,镜像hub里面有来自于全世界贡献的各种镜像,包括一些入门和学习练手的镜像,今天我们使用的正式其中一个用于学习练习 ...
- LNMP(5)
目录 一.实战 1.安装 安装nginx 数据库 php wordpress 2.三者建立联系 nginx和php建立联系 php与mariadb建立关系 二.数据分离 三.理论 静态和动态 web应 ...
- Java之Iterator接口(遍历单列集合的迭代器)
Iterator接口概述 在程序开发中,经常需要遍历集合中的所有元素.针对这种需求,JDK专门提供了一个接口java.util.Iterator . Iterator 接口也是Java集合中的一员,但 ...
- IntelliJ IDEA安装与使用
官网:https://www.jetbrains.com/ 点击 点击下载 点击
- bzoj5093图的价值:多项式,斯特林数(二项式反演)
Description “简单无向图”是指无重边.无自环的无向图(不一定连通). 一个带标号的图的价值定义为每个点度数的k次方的和. 给定n和k,请计算所有n个点的带标号的简单无向图的价值之和. 因为 ...
- 高阶函数&&高阶组件(二)
高阶组件总共分为两大类 代理方式 操纵prop 访问ref(不推荐) 抽取状态 包装组件 继承方式 操纵生命周期 操纵prop 代理方式之 操纵prop 删除prop import React fro ...
- SpringData JPA实现增删改
一.创建实体类并自动生成数据库表 二.dao层继承JpaRepository 三.controller中增加操作 四.controller中删除操作 五.controller中修改操作
- 阿里面试实战题2----ReentrantLock里面lock和tryLock的区别
ReentrantLock ReentrantLock(轻量级锁)也可以叫对象锁,可重入锁,互斥锁.synchronized重量级锁,JDK前期的版本lock比synchronized更快,在JDK1 ...
- Ruby中星号打包解包操作
Ruby中可以使用一个星号*和两个星号**完成一些打包.解包操作,它们称为splat操作符: 一个星号:以数组为依据进行打包解包(参考文章) 两个星号:以hash为依据进行打包解包(参考文章) 两个星 ...