过滤器

1、过滤器的用法,用 ‘|’ 分割表达式和过滤器。

　 例如：{{ msg | filter}} {{msg | filter(a)}} a就标识filter的一个参数。

　　

用两个过滤器：{{msg | myfilter | myfilternumber }}

2、自定义的过滤器

　　过滤器的结构为：Vue.filter("id",function(value,a){});

　　value是过滤器的一个参数，也是默认的原始值。a是自定义的一个参数。

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title></title>

    <script src="vue.js"></script>

    <style>

    </style>

</head>

<body>

    <div id="app">

        <!--输出的字符串中a的个数-->

        <span>msg的值：{{msg}},其中a的个数：</span> {{msg | myfilter('a')}}

        <br>

        <!--输出的字符串中b的个数-->

        <span>msg的值：{{msg}},其中b的个数：</span> {{msg | myfilter | myfilternumber}}

    </div>

</body>

<script type="text/javascript">

    Vue.filter("myfilter", function(value, arg) {

        //返回一个对象或者json字符串，列出字符串中的字符以及字符的个数,不区分大小写

        var obj = {};

        var s = value.split('').sort().join("");

        var reg = /(.)\1+/ig;

        var str = s.replace(reg, "$1"); //字符串去重后的结果

        var i = 0,

            n,

            a;

        while (s.length > 0) {

            a = str.charAt(i);

            n = s.lastIndexOf(a) + 1;

            obj[a] = n;

            s = s.substring(n);

            i++;

        }

        return arg ? obj[arg] : obj;

    });

    Vue.filter("myfilternumber", function(value) {

        return value.b;

    });

    var app1 = new Vue({

        el: "#app",

        data: {

            msg: "a1a1aba2babac"

        },

        methods: {

        }

    });

</script>

</html>

filters过滤器

<div id='app'>

数字1：{{num1:toInt}}

数字2：{{num2:toInt}}

数字3：{{num3:toInt}}

</div>	

通过管道符|把函数toInt放在变量后面，num1，num2，num3会分别作为参数value传入toInt（value）方法进行运算，并返回一个整数。

let vm=new Vue({

	el:'#app',

	data:{

		num1:33.11,

		num2:23.22,

		num3:90.65

	},

	//过滤器

	filters:{

		toInt(value){//ES6语法

			return pparseInt(value)

		}

	}

})

参数对象除了el和data属性之外，还多了一个filters属性，它的值就是一个对象，里面定义了一个叫toInt()的方法，传入了一个value的参数，函数的作用就是把传入的参数value，简单地转成一个整出并return回去。

Vue基础知识之过滤器（四）的更多相关文章

  1. [SQL] SQL 基础知识梳理（四） - 数据更新

    SQL 基础知识梳理(四) - 数据更新 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/5929786.html 序 这是<SQL 基础知识梳理( ...

  2. vue基础知识之vue-resource/axios

    Vue基础知识之vue-resource和axios(三)   vue-resource Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的DOM选择器,就没 ...

  3. Vue基础知识之vue-resource和axios

    Vue基础知识之vue-resource和axios  原文链接:http://www.cnblogs.com/Juphy/p/7073027.html vue-resource Vue.js是数据驱 ...

  4. Go基础知识梳理（四）

    Go基础知识梳理(四) GO的哲学是"不要通过共享内存来通信,而是通过通信来共享内存",通道是GO通过通信来共享内存的载体. rumtime包常用方法 runtime.NumGor ...

  5. Vue基础知识简介

    基础知识: vue的生命周期: beforeCreate/created.beforeMount/mounted.beforeUpdate/updated.beforeDestory/destorye ...

  6. Kali Linux渗透基础知识整理（四）：维持访问

    Kali Linux渗透基础知识整理系列文章回顾 维持访问 在获得了目标系统的访问权之后,攻击者需要进一步维持这一访问权限.使用木马程序.后门程序和rootkit来达到这一目的.维持访问是一种艺术形式 ...

  7. 数据库基础知识详解四：存储过程、视图、游标、SQL语句优化以及索引

    写在文章前:本系列文章用于博主自己归纳复习一些基础知识,同时也分享给可能需要的人,因为水平有限,肯定存在诸多不足以及技术性错误,请大佬们及时指正. 11.存储过程 ​ 存储过程是事先经过编译并存储在数 ...

  8. Vue基础知识总结（二）

    一.解决网速慢的时候用户看到花括号标记 (1)v-cloak,防止闪烁,通常用于比较大的选择器上. 给元素添加属性v-cloak,然后style里面:[v-cloak]{display:none;} ...

  9. Vue基础知识总结（一）

    一.基本语法: 1.实例化:new Vue({}) 2.el:一定是根容器元素(vue的作用域就是这个根元素内),就是写选择器  data:用于存储数据      methods:定义方法(方法里th ...

随机推荐

  1. 优化--前端（全占课，未完成作业：）;CDN; Http／2的设置（未完成)

    前端效能: 关键渲染路径:Google 文档 JavaScript 加载最佳化 让html和javascript同时渲染: 设置<script>的async或者defer属性(boolea ...

  2. Appium 自动化测试(9) -- 在Uiautomator中查看webview元素

    在uiautomator中,直接查看不到webview中的元素,不知道大家遇到过没有?如下 解决方法如下: step0:将uiautomator关闭 step1:在appium 中,设置Android ...

  3. UVA-11613 Acme Corporation （最大费用最大流+拆点）

    题目大意:有一种商品X,其每每单位存放一个月的代价I固定.并且已知其每月的最大生产量.生产每单位的的代价.最大销售量和销售单价,还已知每个月生产的X能最多能存放的时间(以月为单位).问只考虑前m个月, ...

  4. UVA-1613 K-Graph Oddity （着色问题）

    题目大意:一张n个顶点.m条边的无向连通图,用k种颜色着色(相邻顶点颜色不能相同),其中k为不小于点的最大度数的最小奇数. 题目分析:水题一道.建张图深搜一下就行了. # include<ios ...

  5. sgu 137. Funny Strings 线性同余,数论,构造 难度:3

    137. Funny Strings time limit per test: 0.25 sec. memory limit per test: 4096 KB Let's consider a st ...

  6. halcon之屌炸天的自标定（1）

      本次先对halcon的自标定做个整体介绍,了解屌炸天的自标定在实际应用中的应用与实现方法,具体的编程细节将在后续的文章中介绍. halcon提供了一种自标定的算子,它可以在不用标定板的情况下,标定 ...

  7. PHP网站自动化配置的实现

    一直都在用yii2做项目,有在用自动化配置,但是没有自己去配置过.中午没事去看了下yii的初始化代码,发现都是php而已! yii2初始化项目代码 所以,我们做项目肯定是可以用php做的,于是我新建了 ...

  8. git一键提交修改文件

    git一键提交修改文件 首先安装git, 有git bash: 新建一个gitcmt文件,放置于与你的项目同级的目录里: 使用:打开git bash, 方法1. git pull\git status ...

  9. Beta阶段第2周/共2周 Scrum立会报告+燃尽图 12

    作业要求[https://edu.cnblogs.com/campus/nenu/2018fall/homework/2411] 版本控制:https://git.coding.net/liuyy08 ...

  10. linux提权辅助工具（四）：LinEnum.sh

    来自:https://raw.githubusercontent.com/rebootuser/LinEnum/master/LinEnum.sh #!/bin/bash #A script to e ...