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 ...
随机推荐
- Python_13 接口测试openpyxl和表操作
一.openpyxl 安装 pip install openpyxl 在Terminal中输入 excel操作步骤 找到目标excel 打开 读取数据.编辑excel单元格 保存 关闭 open ...
- ES6之数组的Array.from()方法
Array.from()方法就是构造函数本身的方法 将一个类数组对象或者可遍历对象转换成一个真正的数组. 那么什么是类数组对象呢?所谓类数组对象,最基本的要求就是具有length属性的对象. 1.将类 ...
- react中子组件给父组件传值
组件间通信: React中,数据是从上向下流动的,也就是一个父组件可以把它的 state/props通过props传递给它的子组件,但是子组件,不能修改props,如果组件需要修改父组件中的数据,则 ...
- windows 添加应用的临时签名
我们需要给应用添加数字签名,比如沃通.DigiCert. 申请购买代码签名证书需要一段时间,或者个人开发的应用签名,所以我们需要临时证书. 打开VS-工具-命令行,下面是添加过程 1. 创建一个测试证 ...
- flutter系列之:做一个修改组件属性的动画
目录 简介 flutter中的动画widget AnimatedContainers使用举例 总结 简介 什么是动画呢?动画实际上就是不同的图片连续起来形成的.flutter为我们提供了一个Anima ...
- 2021-01-23：LFU手撸，说下时间复杂度和空间复杂度。
福哥答案2021-01-23:这道题复杂度太高,短时间内很难写出来.面试的时候不建议手撕代码.一个存节点的map+一个存桶的map+一个存桶的双向链表.桶本身也是一个双向链表.存节点的map:key是 ...
- 2021-02-25：给定一个正数数组arr，请把arr中所有的数分成两个集合。如果arr长度为偶数，两个集合包含数的个数要一样多；如果arr长度为奇数，两个集合包含数的个数必须只差一个。请尽量让两个集合的累加和接近，返回最接近的情况下，较小集合的累加和。
2021-02-25:给定一个正数数组arr,请把arr中所有的数分成两个集合.如果arr长度为偶数,两个集合包含数的个数要一样多:如果arr长度为奇数,两个集合包含数的个数必须只差一个.请尽量让两个 ...
- mysql 新建数据库 排序规则
utf8_unicode_ci和utf8_general_ci对中.英文来说没有实质的差别.utf8_general_ci校对速度快,但准确度稍差.utf8_unicode_ci准确度高,但校对速度稍 ...
- 关于ESXi下如何查看磁盘SMART信息(SATA & NVMe)的教程
ESXi下查看磁盘SMART比较麻烦,并且SATA协议的和NVMe协议的操作不一样,下面分别进行详细陈述 SATA--使用smartctl查看 本部分参考梦幻生命@CSDN(原文链接https://b ...
- 2019年蓝桥杯C／C++大学B组省赛真题(数的分解)
题目描述: 把2019分解成3个各不相同的正整数之和,并且要求每个正整数都不包含数字2和4,一共有多少种不同的分解方法? 注意交换3个整数的顺序被视为同一种方法,例如1000+1001+18 和100 ...