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+开始支持 ...
随机推荐
- python代码-leetcode1 两数相加
1.两个循环 class Solution: def twoSum(self, nums, target): n=len(nums) for i in range(n): for j in range ...
- Jmeter BeanShell 引用变量报错Error or number too big for integer
如果你通过CSV Data Set Config或者_StringFromFile函数来参数化你的请求,需要特别注意当参数为纯数字时,jmeter会默认将其识别成int型数据,说明jmeter并不是默 ...
- CGI "Internal Server Error"
在安裝 CGI 程式時如果設定錯誤,便會看到 "500 Internal Server Error" 訊息,一般常見的錯誤可以用以下方法解決: 1. CGI 程式的權限需要設定為 ...
- linux简单命令4---压缩与解压
1:压缩命令:zip 2:.gz压缩,不能压缩目录,会压缩目录里的文件 3:.bz2压缩,不能压缩目录,直接报错 ------------------------------------------- ...
- 移动App书写Test Case时需要考虑的检查点
在测试工作中我们需要不断的总结和储备自己的知识和经验,譬如具备特定属性.环境以及场景,如:PC,手机,智能设备,特定网络环境下. 我们需要关注的功能点,容易出错的位置,这将对我们整个测试过程起至关作用 ...
- web前端学习路程
学习路程: 1.HTML和CSS基础 2.JavaScript语言 3.jQuery and ajax 4.综合网站实践 5.优化及调试
- 当后端返回的数据是以属性做开头，怎么用length取值
在我们前端开发中,一般需要的数据是分条的如 [{},{},{},{}] ,这样的数据方便我们用length取值,尤其是在表格中.在控制台看的时候能轻易的看出1 2 3 4条,但有时候后台返回的数据不是 ...
- sklearn.feature_extraction.text.CountVectorizer 学习
CountVectorizer: CountVectorizer可以将文本文档集合转换为token计数矩阵.(token可以理解成词) 此实现通过使用scipy.sparse.csr_matrix产生 ...
- 关于verilog实例化的介绍
概念 当我们完成一个比较完整的系统的时候,通常需要编写一个Testbench来验证自己的设计的功能能否满足设计要求.在这个系统中通常会有一个top模块来连接那些小的模块,verilog通过实例化的方式 ...
- kubernetes 部署ingress
kubernetes Ingess 是有2部分组成,Ingress Controller 和Ingress服务组成,常用的Ingress Controller 是ingress-nginx,工作的原理 ...