vue过滤器

最新推荐文章于 2023-02-06 10:37:11 发布

csh-无分清浊

最新推荐文章于 2023-02-06 10:37:11 发布

阅读量123

点赞数

本文链接：https://blog.csdn.net/qq_38362831/article/details/90645630

版权

过滤器：

vue 1.x内部提供提供了 10 个过滤器，这10个过滤器是针对数字纸币符号日期大小写小数位数等的格式化
什么叫过滤器？
格式化数据的一个工具
举例： 12.22225 —> 12.2
Tue May 28 2019 10:15:08 GMT+0800 (China Standard Time) – > 2019/05/28
过滤器一样也有两种声明形式
全局声明
Vue.filter(过滤器名称，回调函数) 回调函数中有一个参数value
value值就表示的是格式化数据的值
局部声明
new Vue({
filters: {
‘过滤器名称’： function( value ){
return
}
}
})
过滤器的回调函数必须有返回值
如何使用使用过滤器？
我们用一个叫做管道符的来使用过滤器
举例：
数据 | 过滤器名称


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
</head>
<body>
  <div id="app">
        <p> {{ money | num('$',3) }} </p>
  </div>
</body>
// 全局声明
<script>
    Vue.filter( 'num', function ( val,type, ge ) {//val 数值 type 符号 ge 小数个数
    return `${ type } ${ val.toFixed(ge) }`
  })

  new Vue({
    el: '#app',
    data: {
      money: 666.9999
    }
  })
</script>
</html>

csh-无分清浊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue过滤器

过滤器：vue 1.x内部提供提供了 10 个过滤器，这10个过滤器是针对数字纸币符号日期大小写小数位数等的格式化什么叫过滤器？格式化数据的一个工具举例： 12.22225 —> 12.2Tue May 28 2019 10:15:08 GMT+0800 (China Standard Time) – > 2019/05/28过滤器一样也有两种声明形式全局声...
复制链接

扫一扫