01-05.Vue自定义过滤器

目录

    • 前言
      • 过滤器的概念
      • 过滤器的基本使用
      • 给过滤器添加多个参数

前言

我们接着上一篇文章01-04.Vue的使用示例:列表功能 来讲。


下一篇文章 02-Vue实例的生命周期函数

过滤器的概念

概念:Vue.js 允许我们自定义过滤器,可被用作一些常见的文本格式化。过滤器可以用在两个地方:mustache 插值表达式v-bind表达式。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符指示。

过滤器的基本使用

比如说,我要将data中msg 后面添加字符串。可以这样做:

(1)在差值表达式中这样调用:

        <p>{{ msg | msgFormat }</p>

上方代码的意思是说:

  • 管道符前面msg:要把 msg 这段文本进行过滤,

  • 管道符后面msgFormat:是通过msgFormat这个过滤器进行来操作。

(2)定义过滤器msgFormat

// filter是过滤器的对象,里面可以定义多个过滤器
// 定义一个过滤器,名字叫做  msgFormat
filters: {msgFormat: function(msg){return msg + '111111'}
}

上方代码解释:

  • 过滤器函数function中,第一个参数指的管道符前面的msg。

  • return 返回的值可以直接在页面上显示

最终,完整版代码如下:

<template><div id="app">{{ '22222' | msgFormat }}</div>
</template><script>
export default {filters: {msgFormat: function(msg){return msg + '111111'}},data() {return {};},methods: {mySubmit: function () {alert("ok");},},
};
</script>

网页显示效果如下:

15

给过滤器添加多个参数

上面的举例代码中,{{ msg | msgFormat }}中,过滤器的调用并没有加参数,其实它还可以添加多个参数。

接下来,我们在上面的举例代码中进行改进。

改进一:过滤器加一个参数。如下:

将 msg 这个字符串进行拼接。代码如下:

<template><div id="app"><!-- 【重要】通过 过滤器 msgFormat 对 msg 进行过滤。括号里的参数代表 function中的 arg2--><p>{{ msg | msgFormat('xxx') }}</p></div>
</template><script>
export default {filters: {msgFormat: function(msg, arg2){return msg + '111111' + arg2}},data() {return {msg: "聆听感受思考"};},methods: {mySubmit: function () {alert("ok");},},
};
</script>
<style>
#app{color: black;
}
</style>

16

注意代码中那行重要的注释:括号里的参数代表 function中的 arg2。

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

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

相关文章

软件模块的耦合

软件模块的耦合 耦合是指软件模块之间的依赖程度&#xff0c;耦合越低&#xff0c;模块之间的独立性越高&#xff0c;软件的可维护性、可重用性也越高。下面是几种常见的耦合类型的概念&#xff1a; 数据耦合&#xff08;Data Coupling&#xff09;&#xff1a; 当一个模块通…

Python ❀ 使用代码解决今天中午吃什么的重大生存问题

1. 环境安装 安装Python代码环境参考文档 2. 代码块 import random# 准备一下你想吃的东西 hot ["兰州拉面", "爆肚面", "黄焖鸡", "麻辣香锅", "米线", "麻食", "羊肉泡馍", "肚丝/羊血汤&qu…

doxygen 1.11.0 使用详解(九)——包含公式

目录 Doxygen allows you to put LATEX formulas in the output (this works only for the HTML, LATEX and RTF output. To be able to include formulas (as images) in the HTML and RTF documentation, you will also need to have the following tools installed latex: …

定时监测服务器磁盘是否超过阈值,超过就删除docker 镜像

达到指定百分比 删除镜像脚本 df -h 查找到 内存占用信息 &#xff0c;得到的 文件系统名称是 overlay的&#xff0c;Use% 达到70就进行删除docker 镜像 #!/bin/bash# 设置磁盘使用阈值 THRESHOLD70# 获取 overlay 文件系统的磁盘使用百分比 DISK_USAGES$(df -h | grep overl…

利用sentence bert 实现语义向量搜索

目录 基于pytorch的中文语言模型预训练:https://github.com/zhusleep/pytorch_chinese_lm_pretrain/tree/master sentence_emb.py search_faiss_robert768.py faiss_index.py gen_vec_save2_faiss.py 基于pytorch的中文语言模型预训练:https://github.com/zhusleep/pytorch_…

[协议]stm32读取AHT20程序示例

AHT20温度传感器使用程序&#xff1a; 使用i2c读取温度传感器数据很简单&#xff0c;但市面上有至少两个手册&#xff0c;我这个对应的手册贴出来&#xff1a; main: #include "stm32f10x.h" // Device header #include <stdint.h> #includ…

数智赋能内涝治理,四信城市排水防涝解决方案保障城市安全运行

由强降雨、台风造成城市低洼处出现大量积水、内涝的情况时有发生&#xff0c;给人们出行带来了极大不便和安全隐患&#xff0c;甚至危及群众生命财产安全。 为降低内涝造成的损失&#xff0c;一方面我们要大力加强城市排水基础设施的建设&#xff1b;另一方面要全面掌握城市内涝…

U-Boot menu菜单分析

文章目录 前言目标环境背景U-Boot如何自动调起菜单U-Boot添加自定义命令实践 前言 在某个厂家的开发板中&#xff0c;在进入它的U-Boot后&#xff0c;会自动弹出一个菜单页面&#xff0c;输入对应的选项就会执行对应的功能。如SD卡镜像更新、显示设置等&#xff1a; 目标 本…

docker命令详解大全

Docker是一种流行的容器化平台&#xff0c;用于快速部署应用程序并管理容器的生命周期。以下是一些常用的Docker命令及其用途的概述&#xff1a; docker run&#xff1a;创建一个新容器并运行一个命令。docker ps&#xff1a;列出当前运行的容器。docker stop&#xff1a;停止…

Unity射击游戏开发教程:(20)增加护盾强度

在本文中,我们将增强护盾,使其在受到超过 1 次攻击后才会被禁用。 Player 脚本具有 Shield PowerUp 方法,我们需要调整盾牌在被摧毁之前可以承受的数量,因此我们将声明一个 int 变量来设置盾牌可以承受的击中数量。

微信小程序画布显示图片绘制矩形选区

wxml <view class"page-body"><!-- 画布 --><view class"page-body-wrapper"><canvas canvas-id"myCanvas" type"2d" id"myCanvas" classmyCanvas bindtouchstart"touchStart" bindtouchmo…

OpenFeign快速入门 替代RestTemplate

1.引入依赖 <!--openFeign--><dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-starter-openfeign</artifactId></dependency><!--负载均衡器--><dependency><groupId>org.spr…

【全网最全】2024电工杯数学建模B题问题一14页论文+19建模过程代码+py代码+2种保奖思路+数据等(后续会更新成品论文等)

您的点赞收藏是我继续更新的最大动力&#xff01; 一定要点击如下的卡片链接&#xff0c;那是获取资料的入口&#xff01; 【全网最全】2024电工杯数学建模B题问一论文19建模过程代码py代码2种保奖思路数据等&#xff08;后续会更新成品论文等&#xff09;「首先来看看目前已…

C++中的四种类型转换运算符

隐式类型转换是安全的&#xff0c;显式类型转换是有风险的&#xff0c;C语言之所以增加强制类型转换的语法&#xff0c;就是为了强调风险&#xff0c;让程序员意识到自己在做什么。但是&#xff0c;这种强调风险的方式还是比较粗放&#xff0c;粒度比较大&#xff0c;它并没有表…

MySQL中如何知道数据库表中所有表的字段的排序规则是什么?

查看所有表的字段及其排序规则&#xff1a; 你可以查询 information_schema 数据库中的 COLUMNS 表&#xff0c;来获取所有表的字段及其排序规则。以下是一个示例查询&#xff1a; SELECT TABLE_SCHEMA, TABLE_NAME, COLUMN_NAME, COLLATION_NAME FROM information_schema.COL…

【设计模式深度剖析】【5】【创建型】【原型模式】| 类比群发邮件,加深理解

&#x1f448;️上一篇:建造者模式 | 下一篇:创建型设计模式对比&#x1f449;️ 目录 原型模式(Prototype Pattern)概览定义英文原话直译 3个角色类图1. 抽象原型&#xff08;Prototype&#xff09;角色2. 具体原型&#xff08;Concrete Prototype&#xff09;角色3. 客户…

必示科技参与智能运维国家标准预研线下编写会议并做主题分享

近日&#xff0c;《信息技术服务 智能运维 第3部分&#xff1a;算法治理》&#xff08;拟定名&#xff09;国家标准预研阶段第一次编写工作会议在杭州举行。本次会议由浙商证券承办。 此次编写有来自银行、证券、保险、通信、高校研究机构、互联网以及技术方等29家单位&#xf…

在云计算环境中,如何实现资源的高效分配和调度?

在云计算环境中&#xff0c;可以通过以下几种方法实现资源的高效分配和调度&#xff1a; 负载均衡&#xff1a;通过负载均衡算法&#xff0c;将云计算集群的负载均匀地分配到各个节点上。常见的负载均衡算法有轮询、最小连接数、最短响应时间等。 资源调度算法&#xff1a;为了…

Linux基础(四):Linux系统文件类型与文件权限

各位看官&#xff0c;好久不见&#xff0c;在正式介绍Linux的基本命令之前&#xff0c;我们首先了解一下&#xff0c;关于文件的知识。 目录 一、文件类型 二、文件权限 2.1 文件访问者的分类 2.2 文件权限 2.2.1 文件的基本权限 2.2.2 文件权限值的表示方法 三、修改文…

CSS3 新增背景属性 + 新增边框属性(如果想知道CSS3新增背景属性和新增边框属性的知识点,那么只看这一篇就够了!)

前言&#xff1a;CSS3在CSS2的基础上&#xff0c;新增了很多强大的新功能&#xff0c;从而解决一些实际面临的问题&#xff0c;本篇文章主要讲解的为CSS3新增背景属性和新增边框属性。 ✨✨✨这里是秋刀鱼不做梦的BLOG ✨✨✨想要了解更多内容可以访问我的主页秋刀鱼不做梦-CSD…