美文网首页
21、vue中的过滤器

21、vue中的过滤器

作者: 蕉下客_661a | 来源:发表于2019-06-03 11:13 被阅读0次

过滤器可以用在两个地方,插值和v-bind表达式。有全局过滤器和局部过滤器。
当有两个名称相同的局部过滤和全局过滤的时候会先调用局部。
常用的两个场景,价格和时间。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="app">
   <p>单价: {{money | moneyFormat()}}</p>
   <p>总价: {{total | moneyFormat()}}</p>
</div>
<script src="lib/vue.js"></script>
<script>
    // 1. 定义全局过滤器
    Vue.filter('moneyFormat', (money)=>{
        return '¥' + money + '.000';
    });

    new Vue({
        el:'#app',
        data: {
            money:189898,
            total: 1
        },
        methods:{

        },
        filters: {
            // 2. 局部过滤器
            moneyFormat(money){
                return '$' + money + '.0';
            }
        }
    });
</script>
</body>
</html>

相关文章

  • vue 过滤器filter中this为undefined

    vue过滤器filters 中this为undefined 可以使用computed解决: vue中的过滤器更偏向...

  • vue 过滤器做字数限制并显示省略号

    定义过滤器 使用vue中的 过滤器filters

  • Vue前端面试2021-017

    1、Vue中的过滤器的作用是什么 ?如何声明过滤器? Vue中的过滤器主要是用来按照指定的格式进行数据输出格式渲染...

  • vue之自定义过滤器(六)

    一、过滤器介绍:1、在Vue中会通过过滤器(Filters)来渲染数据,使视图可读性更加优雅。2、Vue中的过滤器...

  • vue学习大纲3-过滤器、指令、动画

    自定义过滤器: 在vue1.0中有过滤器,比如: 在vue2.0中所有的内置过滤器都被销毁了,2.0推荐我们自己写...

  • Vue 的过滤器

    前言:Vue 中的过滤器(filter)不能替代 Vue 中的 methods、computed 或者 watch...

  • Vue2.0中Filter的使用问题

    vue2.0里,不再有自带的过滤器,需要自己定义过滤器 在 Vue1.0 中内置了几种实用的过滤器函数如 uppe...

  • 21、vue中的过滤器

    过滤器可以用在两个地方,插值和v-bind表达式。有全局过滤器和局部过滤器。当有两个名称相同的局部过滤和全局过滤的...

  • Vue中自定义过滤器

    导入Vue.js后直接在script中定义 {{ msg | msgFormat }} 同样Vue过滤器名字中可...

  • tool.js

    vue时间格式过滤器(今天,昨天,周几,年月日) vue金额过滤器 手机横屏签名功能(vue)

网友评论

      本文标题:21、vue中的过滤器

      本文链接:https://www.haomeiwen.com/subject/slzqxctx.html