【Vue】2-5、Vue 过滤器

过滤器(Filters)是 vue 为开发者提供的功能,用于文本的格式化。

【Vue2 可用,Vue3 已经弃用】

过滤器可以用在两个地方:

  • 插值表达式

  • v-bind 属性绑定

过滤器应该被添加在 JavaScript 表达式的尾部,由“管道符 | ”进行调用

<body><div id="app"><p>message : {{ message | capi }}</p></div><script src="./lib/vue.js"></script><script>const vm = new Vue({el: '#app',data:{message: 'hello vue filters'},// 过滤器filters:{// val 就是 | 前面的 messagecapi(val){// 过滤器一定要由返回值return val.charAt(0).toUpperCase() + val.slice(1);}}})</script>
</body>

私有过滤器和全局过滤器

在 filters 节点下定义的过滤器,称为“私有过滤器”,因为它只能在当前 vm 所控制的 el 区域内使用。

若需要在多个 vue 实例之间共享过滤器,则可以按照如下格式定义全局过滤器:

Vue.filters('capitalize',(str) => {return str.chatAt(0).toUpperCase() + str.slice(1) + '--'
})

若全局过滤器与私有过滤器名称一致,按照就近原则,调用私有过滤器  

 

一  叶  知  秋,奥  妙  玄  心

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/656056.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

小程序脚本语言——SJS 语法参考

SJS&#xff08;safe/subset javascript&#xff09; 是小程序的一套脚本语言&#xff0c;结合 tyml&#xff0c;可以构建出页面的结构。 注意事项 SJS 的运行环境和其他 JavaScript 代码是隔离的&#xff0c;SJS 中不能调用其他 JavaScript 文件中定义的函数&#xff0c;也不…

那些年与指针的情仇(二)---二级指针指针与数组的那点事函数指针

关注小庄 顿顿解馋(&#xff61;&#xff65;∀&#xff65;)&#xff89;&#xff9e; 欢迎回到我们的大型纪录片《那些年与指针的爱恨情仇》&#xff0c;在本篇博客中我们将继续了解指针的小秘密&#xff1a;二级指针&#xff0c;指针与数组的关系以及函数指针。请放心食用&a…

【AI量化分析】小明在量化中使用交叉验证原理深度分析解读

进行交叉验证好处 提高模型的泛化能力&#xff1a;通过将数据集分成多个部分并使用其中的一部分数据进行模型训练&#xff0c;然后使用另一部分数据对模型进行测试&#xff0c;可以确保模型在未见过的数据上表现良好。这样可以降低模型过拟合或欠拟合的风险&#xff0c;提高模…

浅谈MySQL3种日志

浅谈MySQL3种日志 日志是mysql数据库的重要组成部分&#xff0c;记录着数据库运行期间各种状态信息。mysql日志主要包括错误日志、查询日志、慢查询日志、事务日志、二进制日志几大类。作为开发&#xff0c;我们重点需要关注的是二进制日志(binlog)和事务日志(包括redo log和un…

Qt|QPushButton控件讲解

前提 按钮分为了四种状态&#xff1a;常态、聚焦、按下、禁用 前一段时间更新了MFC框架下CButton的自绘。因为MFC框架下的按钮限制性很高&#xff0c;所以只能由自绘实现各种风格&#xff0c;但是QT框架完美的解决了这个问题&#xff0c;我们只需要了解如何调用&#xff0c;就…

springboot 个人网盘系统 java web网盘文件分享系统 web在线云盘

springboot 个人网盘系统 java web网盘文件分享系统 web在线云盘 开发工具&#xff1a;Eclipse/idea Java开发环境&#xff1a;JDK8.0 Web服务器:Tomcate9.0。 数据库&#xff1a;MySQL数据库。 技术框架&#xff1a;Struts2SpringHibernate和JSP 有详细的源码&#xff0…

MySQL 函数参考手册

目录 MySQL 字符串函数 MySQL 数值函数 MySQL 日期函数 MySQL 高级函数 MySQL 字符串函数 函数描述ASCII返回特定字符的 ASCII 值CHAR_LENGTH返回字符串的长度&#xff08;以字符为单位&#xff09;CHARACTER_LENGTH返回字符串的长度&#xff08;以字符为单位&#xff09;…

【机器学习前置知识】隐变量

隐变量又称潜变量&#xff0c;顾名思义就是隐藏着的随机变量&#xff0c;它不能通过观测来得到&#xff0c;或者说它产生的过程是不可观测的&#xff0c;然而它却可以在潜移默化中影响可观测变量。 我们用抛硬币为例来解释什么是隐变量。假设有 A 、 B 、 C A、B、C A、B、C …

使用nginx对视频、音频、图片等静态资源网址,加token签权

目前很多静态资源,都可以无权限验证,进行访问或转发,对有价值的资源进行签权,限制转发无法在代码中实现拦截,我们可以使用nginx对视频、音频、图片等静态资源网址,加token签权 如: http://192.168.1.22/123.mp3 http://192.168.1.22/123.m3u8 http://192.168.1.22/1…

十一、C++核心编程(1)内存分区模型

本阶段主要针对面向对象程技术做详细讲解&#xff0c;探讨C中的核心和精髓。 一、内存分区模型 1、C程序在执行时&#xff0c;将内存大方向划分为4个区域&#xff1a; 代码区:存放函数体的二进制代码&#xff0c;由操作系统进行管理的全局区:存放全局变量和静态变量以及常量…

qt5-入门

参考&#xff1a; qt学习指南 Qt5和Qt6的区别-CSDN博客 Qt 学习之路_w3cschool Qt教程&#xff0c;Qt5编程入门教程&#xff08;非常详细&#xff09; 本地环境&#xff1a; win10专业版&#xff0c;64位 技术选择 Qt5力推QML界面编程。QML类似HTML&#xff0c;可以借助CSS进…

【超详细教程】GPT-SoVITs从零开始训练声音克隆教程(主要以云端AutoDL部署为例)

目录 一、前言 二、GPT-SoVITs使用教程 2.1、Windows一键启动 2.2、AutoDL云端部署 2.3、人声伴奏分离 2.4、语音切割 2.5、打标训练数据 2.6、数据集预处理 2.7、训练音频数据 2.8、推理模型 三、总结 一、前言 近日&#xff0c;RVC变声器的创始人&#xff08;GitH…

Linux——Ubuntu安装MySQL并设置远程登录

1、安装mysql8.0.35 1.更新包列表&#xff0c;首先&#xff0c;确保您的系统已更新到最新状态。运行以下命令来更新包列表和安装最新的软件包&#xff1a; sudo apt update sudo apt upgrade2.安装MySQL服务器&#xff1a;运行以下命令来安装MySQL服务器&#xff1a; sudo a…

【C++】this指针

this指针&#xff01; 目录 this指针的引出&#xff1a;从C语言中理解this指针&#xff1a; this指针的特性&#xff1a;练习&#xff1a; this指针的引出&#xff1a; 我们知道&#xff0c;类中的成员函数是有专门的存放区&#xff1a;公共代码区&#xff0c;这也就意味着我…

方案:将vue项目放在SpringMVC中,并用tomcat访问

需要先将项目生成一次war包才能访问项目的webapp文件夹下的资源&#xff0c;否则tomcat的webapp文件夹下面不会生成对应资源文件夹就无法访问。 问题&#xff1a;目录如下&#xff1a; 今天我测试了一下将vue打包后&#xff0c;放入webapp下面访问&#xff0c;却发现vue项目无…

第九节HarmonyOS 常用基础组件13-TimePicker

1、描述 时间选择组件&#xff0c;根据指定参数创建选择器&#xff0c;支持选择小时以及分钟。默认以24小时的时间区间创建滑动选择器。 2、接口 TimePicker(options?: {selected?: Date}) 3、参数 selected - Date - 设置选中项的时间。默认是系统当前的时间。 4、属性…

软件工程学科的本质

软件工程学科的本质是分析与设计&#xff0c;是画图&#xff0c;是进行软件架构设计&#xff0c;进行进行软件项目管理。而非写代码。 分析有结构化分析&#xff0c;面向对象分析法&#xff0c;都用图来描述表达。 设计有结构化设计&#xff0c;面向对象设计法&#xff0c;都…

云计算运维 · 第三阶段 · git

学习b记 第三阶段 三、持续集成 1、git #安装 yum -y install git[rootgit-git ~]# git config –-global user.name "qxl" # 配置git使用用户 [rootgit-git ~]# git config –-global user.email "qxlmail.com" # 配置git使用邮箱 [rootgit-git ~]# g…

面试题 02.07. 链表相交(力扣LeetCode)

文章目录 面试题 02.07. 链表相交题目描述解题思路c代码优化后c代码 面试题 02.07. 链表相交 题目描述 给你两个单链表的头节点 headA 和 headB &#xff0c;请你找出并返回两个单链表相交的起始节点。如果两个链表没有交点&#xff0c;返回 null 。 图示两个链表在节点 c1 …