vue-filters(过滤器)
局部过滤器：
<html> <head>
<title>vue</title>
<meta charset="utf-8">
</head> <body>
<div id="app">
{{msg | toFixed(1)}}
<!-- msg是参数input的值，方法里的参数都是作为input后的参数 -->
</div>
</body>
<script src="node_modules\vue\dist\vue.js"></script>
<script>
let vm = new Vue({
el: "#app",
filters: {
// toFixed(input,param1,param2,param3)
toFixed(input, num) { //第二个参数为小数点个数
return '￥' + input.toFixed(num);
}
},
data:{
msg:15.123
}
});
</script> </html>
全局过滤器（记得放在所有实例之前）
<html> <head>
<title>vue</title>
<meta charset="utf-8">
</head> <body>
<div id="app">
{{msg | my(2)}}
<!-- msg是参数input的值，方法里的参数都是作为input后的参数 -->
</div>
</body>
<script src="node_modules\vue\dist\vue.js"></script>
<script>
// 全局过滤
// Vue.filter(name,function)
Vue.filter('my',(input,num)=>{
return '￥' + input.toFixed(num);
})
// 局部过滤
let vm = new Vue({
el: "#app",
filters: {
// toFixed(input,param1,param2,param3)
toFixed(input, num) { //第二个参数为小数点个数
return '￥' + input.toFixed(num);
}
},
data:{
msg:15.123
}
});
</script> </html>
vue-filters(过滤器)的更多相关文章
- vue filters过滤器
vue filters过滤器 vue.js允许我们自定义过滤器,可被使用于一些常见的文本格式化,过滤器可以用在两个地方,双花括号插值和 v-bind表达式.最常见的就是双花括号插值. 比如如下代码:{ ...
- Vue -- filters 过滤器、倒计时效果
局部过滤器 时间.***号 <div id="wrapper" class="wrapper" style="display: none;&qu ...
- vue filters过滤器的使用
说的很详细 https://www.w3cplus.com/vue/how-to-create-filters-in-vuejs.html
- 六、vue基础--过滤器定义
七.过滤器定义 1.使用:{{username|strip}}.<a :href="url|strip">百度</a> 2.定义:都是定义一个函数,这个函数 ...
- Vue.js Cookbook: 添加实例属性; 👍 axios（4万➕✨）访问API; filters过滤器;
add instance properties //加上$,防止和已经定义的data,method, computed的名字重复,导致被覆写.//可以自定义添加其他符号. Vue.prototype. ...
- Vue学习之--------Vue中过滤器(filters)的使用（代码实现）（2022/7/18）
1.过滤器 1.1 概念 过滤器: 定义:对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理). 语法: 1.注册过滤器:Vue.filter(name,callback) 或 new V ...
- Vue自定义过滤器
gitHub地址: https://github.com/lily1010/vue_learn/tree/master/lesson05 一 自定义过滤器(注册在Vue全局) 注意事项: (1)全局方 ...
- vue filter过滤器简单应用
vue中过滤器,用于一些常见的文本格式化,用 | 来操作. 过滤器可以用在两个地方: 1.在{{}}双花括号中插入值 2.v-bind表达式中使用 <!-- 在双花括号中 --> {{ m ...
- vue的过滤器
Vue.Js 提供了强大的过滤器API,能够对数据进行各种过滤处理,返回需要的结果 vue的过滤器一般在JavaScript 表达式的尾部,由“|”符号指示: 过滤器可以让我们的代码更加优美,一般可以 ...
- vue自定义过滤器的创建和使用
1.简单介绍 过滤器的作用:实现数据的筛选.过滤.格式化. 过滤器的本质是一个有参数,有返回值的方法. 过滤器可以用在两个地方:双花括号插值和v-bind表达式(后者从2.1.0+开始支持 ...
随机推荐
- 小数组的读写和带Buffer的读写哪个快
定义小数组如果是8192个字节大小和Buffered比较的话 定义小数组会略胜一筹,因为读和写操作的是同一个数组 而Buffered操作的是两个数组
- ubuntu下编译和使用libxml2
安装: #sudo apt-get install libxml2 #sudo apt-get install libxml2-dev sudo apt-get install libxml2-dev ...
- osg 三维模型加载与解析(fbx、3ds、ive、obj、osg)
void TeslaManage::OnlineTreeViewDoubleClick(const QModelIndex & index) { int row = index.row(); ...
- 41 Flutter 仿京东商城项目签名验证 增加收货地址、显示收货地址 事件广播
加群452892873 下载对应41课文件,运行方法,建好项目,直接替换lib目录 AddressAdd.dart import 'package:dio/dio.dart'; import 'pac ...
- 阶段5 3.微服务项目【学成在线】_day16 Spring Security Oauth2_02-用户认证技术方案-单点登录
2 用户认证技术方案 2.1 单点登录技术方案 分布式系统要实现单点登录,通常将认证系统独立抽取出来,并且将用户身份信息存储在单独的存储介质,比如: MySQL.Redis,考虑性能要求,通常存储在R ...
- HTTP和WSGI协议
HTTP协议简介 超文本传输协议(HyperText Transfer Protocol)是一种应用层协议.HTTP是万维网的数据通信的基础.设计HTTP最初的目的是为了提供一种发布和接收HTML页面 ...
- Delphi 中记录类型 给记录指针赋值
PPersion=^TPersion; TPersion=packed record Name:string; Sex:string; Clasee:string; end; var persion: ...
- Andrew Ng机器学习课程15
Andrew Ng机器学习课程15 声明:引用请注明出处http://blog.csdn.net/lg1259156776/ 说明:主要介绍了主成分分析,从基本的直观观念出发逐渐推导至公式化的描述,得 ...
- order pick-up and delivery problem
问题一: pi表示取第i个单,di表示送第i个单.di不能在pi的前面.给一个取单送单的顺序,问是否是valid顺序. public boolean isValidOrderList(List< ...
- [转帖]Oracle数据库lob大对象数据类型字段总结，值得收藏
Oracle数据库lob大对象数据类型字段总结,值得收藏 原创 波波说运维 2019-07-11 00:02:00 https://www.toutiao.com/i67108943269703357 ...