局部过滤器：

<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(过滤器)的更多相关文章

  1. vue filters过滤器

    vue filters过滤器 vue.js允许我们自定义过滤器,可被使用于一些常见的文本格式化,过滤器可以用在两个地方,双花括号插值和 v-bind表达式.最常见的就是双花括号插值. 比如如下代码:{ ...

  2. Vue -- filters 过滤器、倒计时效果

    局部过滤器 时间.***号 <div id="wrapper" class="wrapper" style="display: none;&qu ...

  3. vue filters过滤器的使用

    说的很详细 https://www.w3cplus.com/vue/how-to-create-filters-in-vuejs.html

  4. 六、vue基础--过滤器定义

    七.过滤器定义 1.使用:{{username|strip}}.<a :href="url|strip">百度</a> 2.定义:都是定义一个函数,这个函数 ...

  5. Vue.js Cookbook: 添加实例属性; 👍 axios（4万➕✨）访问API; filters过滤器;

    add instance properties //加上$,防止和已经定义的data,method, computed的名字重复,导致被覆写.//可以自定义添加其他符号. Vue.prototype. ...

  6. Vue学习之--------Vue中过滤器(filters)的使用（代码实现）（2022/7/18）

    1.过滤器 1.1 概念 过滤器: 定义:对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理). 语法: 1.注册过滤器:Vue.filter(name,callback) 或 new V ...

  7. Vue自定义过滤器

    gitHub地址: https://github.com/lily1010/vue_learn/tree/master/lesson05 一 自定义过滤器(注册在Vue全局) 注意事项: (1)全局方 ...

  8. vue filter过滤器简单应用

    vue中过滤器,用于一些常见的文本格式化,用 | 来操作. 过滤器可以用在两个地方: 1.在{{}}双花括号中插入值 2.v-bind表达式中使用 <!-- 在双花括号中 --> {{ m ...

  9. vue的过滤器

    Vue.Js 提供了强大的过滤器API,能够对数据进行各种过滤处理,返回需要的结果 vue的过滤器一般在JavaScript 表达式的尾部,由“|”符号指示: 过滤器可以让我们的代码更加优美,一般可以 ...

  10. vue自定义过滤器的创建和使用

    1.简单介绍   过滤器的作用:实现数据的筛选.过滤.格式化.   过滤器的本质是一个有参数,有返回值的方法.   过滤器可以用在两个地方:双花括号插值和v-bind表达式(后者从2.1.0+开始支持 ...

随机推荐

  1. ubuntu 12.04 nfs-server/client安装配置

    由于opennebula的共享存储的方式需要nfs,为了opennebula 3.8在ubuntu 12.04上搭建做铺垫,先介绍下nfs server和client端的安装和配置.   1. nfs ...

  2. jsp中用java代码拼接下拉选备选项及默认值【我】

    <th id="TD_N_CERTIFICATION_TYPE" >证件类型:</th> <td > <select id="C ...

  3. 算法习题---4-3黑白棋（UVa220）

    一:题目 系统提示当前旗手W/B(白/黑)下子,例如W下子,那么W下的位置必须是夹住黑色棋子的位置才可以. 夹住方式:横向.竖向.斜向 注意落子后将夹住的黑棋吞噬变为白棋 (一)题目详解 .棋盘以数组 ...

  4. Qt编写自定义控件37-发光按钮（会呼吸的痛）

    一.前言 这个控件是好早以前写的,已经授权过好几个人开源过此控件代码,比如红磨坊小胖,此控件并不是来源于真实需求,而仅仅是突发奇想,类似于星星的闪烁,越到边缘越来越淡,定时器动态改变边缘发光的亮度,产 ...

  5. 100道iOS面试题

    面试题: 1__weak什么时候用 想要在block内部变外部变量需要加__weak或者__block 2.是否使用过coreImage和coreText?如果使用过,说说你的体验(答案在另一份) 3 ...

  6. netcore部署

    配置的几种方式: https://www.cnblogs.com/humin/p/10330983.html Linux下配置sdk: https://dotnet.microsoft.com/dow ...

  7. maven生命周期及每个阶段自动关联的插件

    生命周期Lifecycle http://maven.apache.org/ref/3.6.1/maven-core/lifecycles.html#default_Lifecycle clean 包 ...

  8. 《CNCF × Alibaba云原生技术公开课》知识点自测（二）：容器基本概念

    (单选)1.已运行 docker run -d -t —name demo ubuntu top 和 docker run --name demo-x --pid container:demo ubu ...

  9. URL锚点HTML定位技术机制、应用与问题

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=3591 一.锚点是什么 ...

  10. utf8 unicode 编码互转

    static function utf8_to_unicode($c) { switch(strlen($c)) { case 1: return ord($c); case 2: $n = (ord ...