vue过滤器(filter)的使用
过滤器分全局过滤器和局部过滤器
<div id="app">
<p>电脑价格:{{price | addPriceIcon}}</p>
</div>
<script>
let vm = new Vue({
el:"#app",
data:{
price:200
},
filters:{
//处理函数
addPriceIcon(value){
console.log(value)//200
return '¥' + value
}
}
})
上边代码,
我的需求是想把价格前面加上人民币符号(¥),
模板中文本后边需要添加管道符号( | )作为分隔,管道符 | 后边是文本的处理函数,
处理函数的第一个参数是:管道符前边的——文本内容,(注意)
如果处理函数上边传递参数,则从第二个参数依次往后是传递的参数。(注意)
可能有人会问:你手动加上去不就得了!如果页面有上千个价格需要添加,
怎么办?几十个页面需要添加怎么办呢,手动加能累晕!所以这种通用机制很重要。
全局过滤器
<div id="app">
<h3>{{viewContent | addNamePrefix}}</h3>
</div>
<script>
Vue.filter("addNamePrefix",(value)=>{
return "my name is" + value
})
let vm = new Vue({
el:"#app",
data:{
viewContent:"吕星辰"
}
})
上边代码,全局过滤器,
参数一:是过滤器的名字,也就是管道符后边的处理函数;
参数二:处理函数,处理函数的参数同上。。。
参考地址:https://blog.csdn.net/qq_42778001/article/details/95613371
vue过滤器(filter)的使用的更多相关文章
- vue - 过滤器filter的基本使用
1.全局过滤器 输出: 过滤器可以多次来调用 输出: 2.私有过滤器 <!DOCTYPE html> <html lang="en"> <head&g ...
- vue 过滤器filter的详解
1.代码运用的地方 <!-- 在双花括号中 --> {{ date | formatDate}} <!-- 在 `v-bind` 中 --> <div v-bind:id ...
- Vue 过滤器 Filter传递参数
给日期类型过滤器设置不同格式 dayjs是一款轻量级的日期操作库 https://day.js.org/en import Vue from 'vue' import dayjs from 'dayj ...
- vue 过滤器 filter 的使用
1.局部过滤器的使用 比如性别,订单状态的数据,后端一般返回数字来代替状态.以性别为模拟数据,0是未知,1是男,2是女. 直接数据渲染出来,只有012,没有性别 根据后端返回的int类型值,前端对数据 ...
- vue的过滤器filter
前记: 排版记录,未免太耽误时间,我就简单的来,下面是一个vue 过滤器的写法,demo 演示,限制一个字符串的长度. vue filter 的官网介绍 https://cn.vuejs.org/v2 ...
- vue 过滤器filters的使用以及常见报错小坑(Failed to resolve filter)
今天使用vue 过滤器中发现一个小坑,网上查到的大都是不正确的解决方法,故分享给大家: 原错误代码: // 过滤器 filter:{ FdishList:function(value){ if (!v ...
- Vue - 过滤器
1.内部过滤器 1):字母操作: ---- 针对字符串 A:capitalize B:uppercase C:lowercase 2):json过ingfy滤器,可将表达式的值转化为Json字符串,本 ...
- Vue 过滤器的使用
Vue官方文档是这样说的:Vue过滤器用于格式化一些常见的文本. 在实际项目中的使用: 定义过滤器 在src定义一个filter.js文件,里面定义过滤器函数,在最后要使用 exprot defaul ...
- vue过滤器微信小程序过滤器和百度智能小程序过滤器
因为最近写了微信小程序和百度小程序,用到了过滤器,感觉还挺好用的,所以就来总结一下,希望能帮到你们. 1. 微信小程序过滤器: 1.1:首先建一个单独的wxs后缀的文件,一般放在utils文件夹里面. ...
- 换个角度使用VUE过滤器
换个角度使用VUE过滤器 过滤器在Vue中的主要用于文本格式化,如小写转大小,日期格式化等操作.官方对这个功能介绍也很简单,不过确实很简单,就一个函数而已.但最近在做两款APP时,遇到一些特殊的需求. ...
随机推荐
- 手把手带你做LiteOS的树莓派移植
摘要:树莓派是英国的慈善组织"Raspberry Pi 基金会"开发的一款基于arm的微型电脑主板.本文介绍基于LiteOS的树莓派移植过程. 本文分享自华为云社区<2021 ...
- 开心档之C++ 数据封装
C++ 数据封装 所有的 C++ 程序都有以下两个基本要素: **程序语句(代码):**这是程序中执行动作的部分,它们被称为函数. **程序数据:**数据是程序的信息,会受到程序函数的影响. 封装是面 ...
- 负载均衡 SLB 健康检查异常
负载均衡 SLB 健康检查异常,接口地址不能访问 接口地址的访问首先需要健康检查状态为正常. 如果接口没有"首页",需要提供一个可访问的controller
- 机器学习周刊 第4期:动手实战人工智能、计算机科学热门论文、免费的基于ChatGPT API的安卓端语音助手、每日数学、检索增强 (RAG) 生成技术综述
LLM开发者必读论文:检索增强(RAG)生成技术综述! 目录: 1.动手实战人工智能 Hands-on Al 2.huggingface的NLP.深度强化学习.语音课 3.Awesome Jupyte ...
- Go--gjson
GJSON 是一个用于处理 JSON 数据的 Go 语言库.它提供了一些方便的功能,例如解析 JSON 字符串.查询 JSON 对象.生成 JSON 对象等 下载gjson: go get -u gi ...
- Codeforces Round #730 (Div. 2) A~D题个人题解
比赛链接:Here 1543A. Exciting Bets math, 给定两个数字 \(a,b (a,b \le 1e18)\) 和以下两种操作: \(a + 1,b+1\) \(a-1,b-1\ ...
- 十、docker镜像的分层
系列导航 一.docker入门(概念) 二.docker的安装和镜像管理 三.docker容器的常用命令 四.容器的网络访问 五.容器端口转发 六.docker数据卷 七.手动制作docker镜像 八 ...
- WebGPU光追引擎基础课:课程介绍
大家好~我开设了"WebGPU光追引擎基础课"的线上课程,从0开始,在课上带领大家现场写代码,使用WebGPU开发基础的光线追踪引擎 课程重点在于基于GPU并行计算,实现BVH构建 ...
- C#查找算法1:二分查找
二分查找也称折半查找(Binary Search),它是一种效率较高的查找方法.但是,折半查找要求线性表必须采用顺序存储结构,而且表中元素按关键字有序排列. 原理:将n个元素分成个数大致相同的两半,取 ...
- 玛珍,玛珍,margin!
最近在整理巩固面试相关的资料,又看到了熟悉的老朋友:margin,当时觉得其读起来很亲切,现在又发现很多遗忘的知识点. 了解margin margin,译为"外边缘",在CSS作为 ...