局部过滤器：

<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. 数据库info.sql

    /* Navicat MySQL Data Transfer Source Server : loaderman Source Server Version : 50540 Source Host : ...

  2. 【集成模型】Boosting

    0 - 思想 Bagging算法思想是减少预测方差(variance),Boosting算法思想是为了减少预测偏差(bias). Boosting算法思想是将“弱学习算法”提升为“强学习算法”.一般来 ...

  3. jvm 指令重排

    引言:在Java中看似顺序的代码在JVM中,可能会出现编译器或者CPU对这些操作指令进行了重新排序:在特定情况下,指令重排将会给我们的程序带来不确定的结果..... 1.  什么是指令重排? 在计算机 ...

  4. 阶段5 3.微服务项目【学成在线】_day07 课程管理实战_04-新增课程-数据字典

    课程的等级是个单选按钮 2.3 数据字典 2.3.1介绍 在新增课程界面需要选择课程等级.课程状态等,这些信息统一采用数据字典管理的方式. 本项目对一些业务的分类配置信息,比如:课程等级.课程状态.用 ...

  5. 一百四十一：CMS系统之根据板块过滤显示帖子

    视图,根据传过来的板块id查数据 @bp.route('/')def index(): board_id = request.args.get('board_id', type=int, defaul ...

  6. 【416】Ubuntu 配置

    修改桌面主题:How to Install Desktop Themes on Ubuntu 18.04 LTS 命令行显示短路径:怎样ubuntu下命令行终端显示短路径 gedit 扩展插件:Use ...

  7. Centos7彻底删除PHP

    查看php版本命令: #php -v 下面的命令是删除不干净的 #yum remove php 因为使用这个命令以后再用 #php -v 还是会看到有版本信息的..... 必须强制删除,使用下面命令查 ...

  8. 第二十二章 集成验证码——《跟我学Shiro》

    目录贴:跟我学Shiro目录贴 在做用户登录功能时,很多时候都需要验证码支持,验证码的目的是为了防止机器人模拟真实用户登录而恶意访问,如暴力破解用户密码/恶意评论等.目前也有一些验证码比较简单,通过一 ...

  9. dos下通过命令访问url网址

    psexec.exe工具: https://blog.csdn.net/feier7501/article/details/8841756 https://www.cnblogs.com/boltki ...

  10. WordPress的摘要显示方式

    WordPress的后台有摘要显示的栏目,如果没有显示,需要设置一下,如图 在列表页现实的内容的时候,一般是有摘要的显示摘要,没有摘要的截取文章的前一部分文字.代码如下 <?php if(has ...