局部定义:

var vm = new Vue({
el:"#app",
data:{
proData:''
},
filters: {
pro_color(index){
switch (index) {
case 0:
return "per-bg-a";
case 1:
return "per-bg-b";
case 2:
return "per-bg-c";
case 3:
return "per-bg-d"; }
}
}
});

全局定义:

Vue.filter('pro_color', function (value) {
pro_color(index){
switch (index) {
case 0:
return "per-bg-a";
case 1:
return "per-bg-b";
case 2:
return "per-bg-c";
case 3:
return "per-bg-d"; }
}
});

在页面中使用:

<div class="layui-progress-bar" :class="5|pro_color"></div>
<div class="layui-progress-bar" :class="3|pro_color"></div>
.
.
这里的3或者5都会被当做实参出入到pro_color方法中去。好比是pro_color(3)或者pro_color(5)

Vue过滤器的更多相关文章

  1. Vue 过滤器的使用

    Vue官方文档是这样说的:Vue过滤器用于格式化一些常见的文本. 在实际项目中的使用: 定义过滤器 在src定义一个filter.js文件,里面定义过滤器函数,在最后要使用 exprot defaul ...

  2. vue 过滤器filters的使用以及常见报错小坑(Failed to resolve filter)

    今天使用vue 过滤器中发现一个小坑,网上查到的大都是不正确的解决方法,故分享给大家: 原错误代码: // 过滤器 filter:{ FdishList:function(value){ if (!v ...

  3. vue过滤器微信小程序过滤器和百度智能小程序过滤器

    因为最近写了微信小程序和百度小程序,用到了过滤器,感觉还挺好用的,所以就来总结一下,希望能帮到你们. 1. 微信小程序过滤器: 1.1:首先建一个单独的wxs后缀的文件,一般放在utils文件夹里面. ...

  4. 换个角度使用VUE过滤器

    换个角度使用VUE过滤器 过滤器在Vue中的主要用于文本格式化,如小写转大小,日期格式化等操作.官方对这个功能介绍也很简单,不过确实很简单,就一个函数而已.但最近在做两款APP时,遇到一些特殊的需求. ...

  5. 3.Vue过滤器

    1.概念: Vue.js 允许你自定义过滤器,可被用作一些常见文本的格式化,过滤器可以用在两个地方:mustache 插值和 v-bind 表达式.过滤器应该被添加在 JavaScript 表达式的尾 ...

  6. 黑马vue---31-32、vue过滤器实例

    黑马vue---31-32.vue过滤器实例 一.总结 一句话总结: vue内部的东西,无论是过滤器还是组件,都是键值对的方式 1.过滤器的定义语法? Vue.filter('过滤器的名称', fun ...

  7. 带你掌握Vue过滤器filters及时间戳转换

    摘要:Vue的filters过滤器是比较常见的一个知识点,下面我将结合时间戳转换的例子带你快速了解filters的用法. 本文分享自华为云社区<三分钟掌握Vue过滤器filters及时间戳转换& ...

  8. Vue - 过滤器

    1.内部过滤器 1):字母操作: ---- 针对字符串 A:capitalize B:uppercase C:lowercase 2):json过ingfy滤器,可将表达式的值转化为Json字符串,本 ...

  9. Vue 过滤器与计算属性

    过滤器 V1.x 版本 过滤器基础 过滤器是一个通过输入数据,能够及时对数据进行处理并返回一个数据结果的简单函数.Vue有很多很便利的过滤器,可以参考官方文档,http://cn.vuejs.org/ ...

  10. 第六节:Vue过滤器的用法和自定义过滤器

    1.过滤器的用法,用  '|' 分割表达式和过滤器. 例如:{{ msg |  filter}}     {{msg | filter(a)}}  a就标识filter的一个参数. 用两个过滤器:{{ ...

随机推荐

  1. httpservlet里单纯分页

    @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletExcep ...

  2. windows搭建golang环境

    由于墙的存在,很多网址无法下载,推荐https://studygolang.com/dl去下载. windows需要配置几个环境变量,我是下载的压缩文件,所以需要自己配置,通过安装程序安装的应该不需要 ...

  3. AD域安装及必要设置

    本文主要介绍AD域的安装和程序开发必要的设置.   一.安装AD域 运行dcpromo命令,安装AD域. 步骤:     1.win+R     2.dcpromo 图例:           百度百 ...

  4. 如何设置非管理员用户配置特定的IIS站点

    如何设置非管理员用     户配置特定的IIS站点 一.           添加IIS管理服务 二.           启动管理服务 勾选启用远程连接后.点右边的应用 三.           设 ...

  5. LeetCode算法题-N-ary Tree Preorder Traversal(Java实现)

    这是悦乐书的第268次更新,第282篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第135题(顺位题号是589).给定一个n-ary树,返回其节点值的前序遍历.例如,给定 ...

  6. ThreadLocal的使用及原理分析

    文章简介 ThreadLocal应该都比较熟悉,这篇文章会基于ThreadLocal的应用以及实现原理做一个全面的分析 内容导航 什么是ThreadLocal ThreadLocal的使用 分析Thr ...

  7. linux目录1

    1.linux常用快捷键 2.linux命令之vmstat 3.linux命令之df 4.linux命令之netstat 5.linux命令之 tar 6.The authenticity of ho ...

  8. (十三)Batch Processing

    In addition to being able to index, update, and delete individual documents, Elasticsearch also prov ...

  9. Spring-boot使用eclipse搭建项目(一)

    https://blog.csdn.net/qq_37421862/article/details/80484625

  10. System.getProperty System.getenv 区别 log4j取法

    log4j 可以${}取系统变量相关属性  getProperty Java提供了System类的静态方法getenv()和getProperty()用于返回系统相关的变量与属性,getenv方法返回 ...