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 ...
随机推荐
- Vue中插槽的使用
1.作用:让父组件可以向子组件指定位置插入html结构,也是一种组件间通信的方式,适用于 父组件 ===> 子组件 . 2.分类:默认插槽.具名插槽.作用域插槽 3.使用方式: ①默认插槽 ...
- Python-pytest-repeat的简单使用
前言: 一.简介 pytest-repeat是pytest的插件,重复执行单个用例,或多个测试用例,并指定重复次数. 二.安装 1.执行如下命令 pip3 install pytest-repeat ...
- 大话AI绘画技术原理与算法优化
引子 博主很长一段时间都没有发文,确实是在忙一些技术研究. 如标题所示,本篇博文主要把近段时间的研究工作做一个review. 看过各种相关技术的公关文章,林林总总,水分很多. 也确实没有多少人能把一些 ...
- 第一个mybatis程序，实现增删改查CRUD
mybatis 介绍 mybatis 本是apache的一个开源项目iBatis, 2010年这个项目由apache迁移到了googlecode,并且改名为MyBatis,2013年11月迁移到Git ...
- JS中内存泄漏的几种情况
JavaScript 中的内存泄漏是指程序中使用的内存不再被需要却没有被释放,最终导致浏览器或者 Node.js 进程使用的内存越来越大,直到程序崩溃或者系统运行缓慢. 在 JavaScript 中, ...
- MySQL对时间戳的格式化
时间转时间戳 select unix_timestamp('2022-02-22 22:22:22'); 时间戳转时间 select from_unixtime(1645539742); 格式化 SE ...
- SQL:DATEDIFF和DATEADD函数
DATEDIFF和DATEADD函数.DATEDIFF函数计算两个日期之间的小时.天.周.月.年等时间间隔总数.DATEADD函数计算一个日期通过给时间间隔加减来获得一个新的日期.要了解更多的DATE ...
- 开发者一定要知道的 API 管理五大趋势
API First 大势所趋,APIaaS(API 作为服务)也将受到越来越多企业和组织的选择,研发团队对 API 研发管理工具的要求也水涨船高. API 在今天的数字化世界中扮演着至关重要的角色,随 ...
- Intellij IDEA最新激活码,适合2022,2023和所有版本,永久更新
分享一下 IntelliJ IDEA 2023.1 最新激活注册码,破解教程如下,可免费永久激活,亲测有效,下面是详细文档哦~ 申明:本教程 IntelliJ IDEA 破解补丁.激活码均收集于网络, ...
- vim 之中 U 命令的浅析
以下文章来源于CSDN,作者黑翼天使56,本文章经原作者同意后授权转载. 今天看 vim帮助文档的 user-manual 的第二章,发现了还有U(大写)这个命令,于是反复实验,略微搞懂了一点它的用处 ...