Vue过滤器
局部定义:
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过滤器的更多相关文章
- Vue 过滤器的使用
Vue官方文档是这样说的:Vue过滤器用于格式化一些常见的文本. 在实际项目中的使用: 定义过滤器 在src定义一个filter.js文件,里面定义过滤器函数,在最后要使用 exprot defaul ...
- vue 过滤器filters的使用以及常见报错小坑(Failed to resolve filter)
今天使用vue 过滤器中发现一个小坑,网上查到的大都是不正确的解决方法,故分享给大家: 原错误代码: // 过滤器 filter:{ FdishList:function(value){ if (!v ...
- vue过滤器微信小程序过滤器和百度智能小程序过滤器
因为最近写了微信小程序和百度小程序,用到了过滤器,感觉还挺好用的,所以就来总结一下,希望能帮到你们. 1. 微信小程序过滤器: 1.1:首先建一个单独的wxs后缀的文件,一般放在utils文件夹里面. ...
- 换个角度使用VUE过滤器
换个角度使用VUE过滤器 过滤器在Vue中的主要用于文本格式化,如小写转大小,日期格式化等操作.官方对这个功能介绍也很简单,不过确实很简单,就一个函数而已.但最近在做两款APP时,遇到一些特殊的需求. ...
- 3.Vue过滤器
1.概念: Vue.js 允许你自定义过滤器,可被用作一些常见文本的格式化,过滤器可以用在两个地方:mustache 插值和 v-bind 表达式.过滤器应该被添加在 JavaScript 表达式的尾 ...
- 黑马vue---31-32、vue过滤器实例
黑马vue---31-32.vue过滤器实例 一.总结 一句话总结: vue内部的东西,无论是过滤器还是组件,都是键值对的方式 1.过滤器的定义语法? Vue.filter('过滤器的名称', fun ...
- 带你掌握Vue过滤器filters及时间戳转换
摘要:Vue的filters过滤器是比较常见的一个知识点,下面我将结合时间戳转换的例子带你快速了解filters的用法. 本文分享自华为云社区<三分钟掌握Vue过滤器filters及时间戳转换& ...
- Vue - 过滤器
1.内部过滤器 1):字母操作: ---- 针对字符串 A:capitalize B:uppercase C:lowercase 2):json过ingfy滤器,可将表达式的值转化为Json字符串,本 ...
- Vue 过滤器与计算属性
过滤器 V1.x 版本 过滤器基础 过滤器是一个通过输入数据,能够及时对数据进行处理并返回一个数据结果的简单函数.Vue有很多很便利的过滤器,可以参考官方文档,http://cn.vuejs.org/ ...
- 第六节:Vue过滤器的用法和自定义过滤器
1.过滤器的用法,用 '|' 分割表达式和过滤器. 例如:{{ msg | filter}} {{msg | filter(a)}} a就标识filter的一个参数. 用两个过滤器:{{ ...
随机推荐
- httpservlet里单纯分页
@Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletExcep ...
- windows搭建golang环境
由于墙的存在,很多网址无法下载,推荐https://studygolang.com/dl去下载. windows需要配置几个环境变量,我是下载的压缩文件,所以需要自己配置,通过安装程序安装的应该不需要 ...
- AD域安装及必要设置
本文主要介绍AD域的安装和程序开发必要的设置. 一.安装AD域 运行dcpromo命令,安装AD域. 步骤: 1.win+R 2.dcpromo 图例: 百度百 ...
- 如何设置非管理员用户配置特定的IIS站点
如何设置非管理员用 户配置特定的IIS站点 一. 添加IIS管理服务 二. 启动管理服务 勾选启用远程连接后.点右边的应用 三. 设 ...
- LeetCode算法题-N-ary Tree Preorder Traversal(Java实现)
这是悦乐书的第268次更新,第282篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第135题(顺位题号是589).给定一个n-ary树,返回其节点值的前序遍历.例如,给定 ...
- ThreadLocal的使用及原理分析
文章简介 ThreadLocal应该都比较熟悉,这篇文章会基于ThreadLocal的应用以及实现原理做一个全面的分析 内容导航 什么是ThreadLocal ThreadLocal的使用 分析Thr ...
- linux目录1
1.linux常用快捷键 2.linux命令之vmstat 3.linux命令之df 4.linux命令之netstat 5.linux命令之 tar 6.The authenticity of ho ...
- (十三)Batch Processing
In addition to being able to index, update, and delete individual documents, Elasticsearch also prov ...
- Spring-boot使用eclipse搭建项目(一)
https://blog.csdn.net/qq_37421862/article/details/80484625
- System.getProperty System.getenv 区别 log4j取法
log4j 可以${}取系统变量相关属性 getProperty Java提供了System类的静态方法getenv()和getProperty()用于返回系统相关的变量与属性,getenv方法返回 ...