2021-7-12 VUE的过滤器使用
过滤器实例：转换首字母大写
<!DOCTYPE html>
<html>
<head>
<title>
</title>
</head>
<body>
<div id="app">
<input type="text" name="" v-model="uname">
<div>{{uname | toUpper}}</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script type="text/javascript"></script>
<script type="text/javascript"> Vue.filter('toUpper',function(val){
var a= val.charAt(0).toUpperCase()+val.slice(1);
return a;
});
new Vue({
el: '#app',
data: {
uname:'hallo',
}
})
</script>
</body>
</html>
过滤器的局部使用，以及在绑定属性中的使用实例
<!DOCTYPE html>
<html>
<head>
<title>
</title>
</head>
<body>
<div id="app">
<input type="text" name="" v-model="uname">
<div :abc="uname | toUpper">{{uname | toLower}}</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script type="text/javascript"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
uname:'Hallo',
},
filters:{
toLower:function(val){
var a= val.toLowerCase();
return a;
},
toUpper:function(val){
return val.toUpperCase();
}
}
})
</script>
</body>
</html>
带参数的过滤器实例
<!DOCTYPE html>
<html>
<head>
<title>
</title>
</head>
<body>
<div id="app">
<input type="text" name="" v-model="uname">
<div :abc="uname | toUpper">{{uname | toLower("aa","bb")}}</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script type="text/javascript"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
uname:'Hallo',
},
filters:{
toLower:function(val,arg,arg1){
var a= val.toLowerCase()+arg+arg1;
return a;
}
}
})
</script>
</body>
</html>
2021-7-12 VUE的过滤器使用的更多相关文章
- Vue自定义过滤器
gitHub地址: https://github.com/lily1010/vue_learn/tree/master/lesson05 一 自定义过滤器(注册在Vue全局) 注意事项: (1)全局方 ...
- vue filter过滤器简单应用
vue中过滤器,用于一些常见的文本格式化,用 | 来操作. 过滤器可以用在两个地方: 1.在{{}}双花括号中插入值 2.v-bind表达式中使用 <!-- 在双花括号中 --> {{ m ...
- vue filters过滤器
vue filters过滤器 vue.js允许我们自定义过滤器,可被使用于一些常见的文本格式化,过滤器可以用在两个地方,双花括号插值和 v-bind表达式.最常见的就是双花括号插值. 比如如下代码:{ ...
- vue的过滤器
Vue.Js 提供了强大的过滤器API,能够对数据进行各种过滤处理,返回需要的结果 vue的过滤器一般在JavaScript 表达式的尾部,由“|”符号指示: 过滤器可以让我们的代码更加优美,一般可以 ...
- vue自定义过滤器的创建和使用
1.简单介绍 过滤器的作用:实现数据的筛选.过滤.格式化. 过滤器的本质是一个有参数,有返回值的方法. 过滤器可以用在两个地方:双花括号插值和v-bind表达式(后者从2.1.0+开始支持 ...
- VUE：过滤器及日期格式化moment库
VUE:过滤器及日期格式化moment库 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...
- VUE笔记 - 过滤器 Vue.filter 形参默认值 @keyup.f2 自定义按键修饰符
过滤器函数的传参: 第一个参数 A 是固定的,表示要过滤之前的内容. 第二个参数 B,表示要把原本的内容 A 过滤成 B. 写函数内容时, 这里第二处只写个参数. 实际的值要写到管道符调用函数的括号内 ...
- 六、vue基础--过滤器定义
七.过滤器定义 1.使用:{{username|strip}}.<a :href="url|strip">百度</a> 2.定义:都是定义一个函数,这个函数 ...
- vue 时间过滤器
过滤器:定义:对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理).语法:1.注册过滤器: Vue.filter(name ,callback)或new Vue{filters:{}}2. ...
- Java学习笔记：2021年12月31日下午-2022年1月1日上午
Java学习笔记:2021年12月31日下午-2022年1月1日上午 摘要:主要记录了计算机的电气构成,学习Linux系统的原因以及关于Linux以及相关操作的基础知识. 目录 Java学习笔记:20 ...
随机推荐
- C# 当前进程是否有控制台窗口
WPF应用程序,在VS的项目属性中,可以设置输出类型: 那我们在代码中,如何判断应用的类型呢.有没有控制台?是否Windows应用程序还是控制台应用程序? Kernel32下函数GetConsoleW ...
- ChatGPT Plugin 插件开发：基于 ASP.NET Core Minimal API
前言 这是一篇ChatGPT插件开发教程,描述如何使用 ASP.NET Core Minimal API 开发 ChatGPT 插件,以最简单的 Todo List 指导示例作为入门教程. 这个Tod ...
- 痞子衡嵌入式：恩智浦i.MX RT1xxx系列MCU启动那些事（12）- 从SD/eMMC启动
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是恩智浦i.MXRT1xxx系列MCU的SD/eMMC卡启动. 最近在恩智浦官方社区上支持了一个关于 i.MXRT 从 SD 卡启动的案例 ...
- Yolov5 根据自己的需要更改 预测框box和蒙版mask的颜色
1.首先找到项目中 utils/plots.py 文件,打开该代码 将原来的 Colors类注释掉(或删掉),改成如下Colors类 class Colors: def __init__(self): ...
- 2022-12-12：有n个城市，城市从0到n-1进行编号。小美最初住在k号城市中 在接下来的m天里，小美每天会收到一个任务 她可以选择完成当天的任务或者放弃该任务 第i天的任务需要在ci号城市完成，
2022-12-12:有n个城市,城市从0到n-1进行编号.小美最初住在k号城市中 在接下来的m天里,小美每天会收到一个任务 她可以选择完成当天的任务或者放弃该任务 第i天的任务需要在ci号城市完成, ...
- Vue根据时间戳制作倒计时15分钟
废话不多说直接上代码 <script> export default { data() { return { downTimeShow: true, timer: null, downTi ...
- es 笔记二之基础查询
本文首发于公众号:Hunter后端 原文链接:es笔记二之基础查询 这一篇笔记介绍 es 的基础查询. 基础查询包括很多,比如排序,类似数据库 limit 的操作,like 操作,与或非等,对于这些操 ...
- ✗ CocoaPods not installed.
mac 配置 flutter 会提示许多 关于xcode的 如图 显示 ✗ CocoaPods installed but not initialized. 其实最开始提示的是 ✗ CocoaPods ...
- python 学习之----time模块
# timeimport time# # #1 获取时间戳# # print(time.time())# # #2 获取格式化时间对象# # #获取默认参数是当前系统时间戳# # print(time ...
- .Net NPOI Excel 导出
NPOI 导出 Excel 最终效果图 环境:Revit,WPF,NPOI 2.5.6,.Net Framework 4.7.2 一.引用 NPOI 右击项目引用,选择 "管理NuGet程序 ...