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中关于keep-alive的使用
keep-alive是Vue提供的一个抽象组件,用来对组件进行缓存,从而节省性能,由于是一个抽象组件,所以在v页面渲染完毕后不会被渲染成一个DOM元素 当组件在keep-alive内被切换时组件的ac ...
- [Pytorch框架] 2.1.1 PyTorch 基础 : 张量
文章目录 PyTorch 基础 : 张量 张量(Tensor) 基本类型 Numpy转换 设备间转换 初始化 常用方法 PyTorch 基础 : 张量 在第一章中我们已经通过官方的入门教程对PyTor ...
- java中的 \r——字符串消失了
at java.lang.NumberFormatException.forInputString(NumberFormatException.java:65) 使用Integer.parseInt( ...
- 求解 LCA の方法
最近公共祖先(LCA) 最近公共祖先简称 LCA(Lowest Common Ancestor).两个节点的最近公共祖先,就是这两个点的公共祖先里面,离根最远的那个. -----oi wiki 举个例 ...
- 【Redis】常用命令介绍
一.Redis常用基本命令 官方文档:https://redis.io/commands/ 参考文档:http://redisdoc.com/ #可以使用help命令查看各redis命令用法[root ...
- vue下载附件按钮功能
一.tools文件夹下tools文件中封装下载方法: const iframeId = 'download_file_iframe' function iframeEle (src) { let el ...
- 2023-03-10：YUV420P像素数据编码为JPEG图片，请用go语言实现。
2023-03-10:YUV420P像素数据编码为JPEG图片,请用go语言实现. 答案2023-03-10: 方法一.使用 github.com/moonfdd/ffmpeg-go 库,基于雷霄骅的 ...
- 2022-05-05：给定一个正数num，要返回一个大于num的数，并且每一位和相邻位的数字不能相等. 返回达标的数字中，最小的那个。 来自微软。
2022-05-05:给定一个正数num,要返回一个大于num的数,并且每一位和相邻位的数字不能相等. 返回达标的数字中,最小的那个. 来自微软. 答案2022-05-05: 从左往右看,是否有相邻两 ...
- weekday
# 模块中的方法weekday()# 可用于检索星期几,结果返回0 - 6# 之间的整数,用来代表"星期一"到"星期日".# self.wt_w = self. ...
- JS加载机制
做开发多年后发现自己思维任然只定位在功能的实现:忽略了很多代码最终的实现,加载机制等 那我们接下来就借助几篇博客来理理天天看见的js:理理他究竟是怎么过执行的 一.代码检测 首先浏览器会对所有js 进 ...