filters过滤器

最新推荐文章于 2022-09-16 17:55:23 发布
最新推荐文章于 2022-09-16 17:55:23 发布
阅读量1.3k 收藏 3
点赞数 2
分类专栏： Vue 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_49612126/article/details/122577891
版权

 这是通过过滤器写的一个只显示10个字的效果图。

 

1）：什么时候用到过滤器？

      绑定一些复杂数据类型的时候用到过滤器

2）：以下两种方式定义过滤器：  

第一种：Vue.filter()定义全局过滤器（不举例子）

******注意全局方法Vue.filter()定义的过滤器之前要先创建vue实例

第二种：用filters选项定义本地过滤器(详细例子和代码)

<li><span>A:</span>{{content | subStr}}</li>

 里面的subStr是过滤器的名字

而且多个过滤器可以串联使用

<span>{{str | lowercase | firstUppercase}}</span>

 下面是一个用第二种方法写的：用filters选项定义本地过滤器(详细例子和代码)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <style>
        li {
            font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
            font-weight: 800;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <div id="app">
        <h4>只显示10个字的本文小Demo</h4>
        <ul>
            <li><span>A:</span>{{content1 | subStr}}</li>
            <li><span>B:</span>{{content2 | subStr}}</li>
            <li><span>C:</span>{{content3 | subStr}}</li>
            <li><span>D:</span>{{content4 | subStr}}</li>
            <li><span>E:</span>{{content5 | subStr}}</li>
        </ul>
    </div>
    <script>
        var demo = new Vue({
            el: "#app",
            data: {
                content1: "读书不误砍柴功",
                content2: "读完硕士再打工",
                content3: "读书不误砍柴功，读完硕士再打工",
                content4: "这一行文字同样会超过10个字滴滴滴滴滴滴滴",
                content5: "ABCDEFGHIJKLMN",
            },
            filters: {
                subStr: function(value) {
                    if (value.length > 10) {//如果字串长度大于10
                        return value.substr(0, 10) + "...";//返回前10个字符
                    } else {
                        return value;
                    }
                }
            }
        })
    </script>
</body>

</html>

     

 

猪儿君
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
filter（过滤器）
记录java学习日常~
06-09 2288
Filter（过滤器）是指在计算机中对数据进行筛选、过滤和修改的一种组件或模块，主要用于在数据传输和处理的过程中对数据进行处理或拦截。在Web开发中，Filter是Java Servlet规范中的一部分，它可以拦截客户端请求和服务器响应，并对它们进行处理、过滤和转换。权限控制：根据用户身份和权限，拦截非法请求或重定向到认证页面。表单验证：对表单提交的数据进行验证，确保数据的完整性和正确性。编码转换：对请求和响应的编码进行转换，以解决乱码问题。
Vue框架学习笔记（一）
时间识人的博客
06-17 381
一：Vue选项 1：挂载元素 Vue中的“el” 选项的作用就是为Vue实例挂载元素，定义好挂载元素后，所有的操作都在该元素内部进行，不会影响到外部元素。挂载个格式可以有类名：.classsName，ID名：#idNmae、以及元素名称是那种，与css基本选择器大致相同。 2：数据 挂载好元素后，就可以通过data选项定义数据，如下： <div id="box"> <h3>博客名称:{{name}}</h3> </div> <s
Filter过滤器（超详细）
醉后不知天在水，满船清梦压星河
01-17 4万+
1.Filter ？什么是过滤器 Filter 过滤器它是 JavaWeb 的三大组件之一。 三大组件分别是：Servlet 程序、Listener 监听器、Filter 过滤器 Filter 过滤器它是 JavaEE 的规范。也就是接口 Filter 过滤器它的作用是：拦截请求，过滤响应。 拦截请求常见的应用场景有： 1.权限检查 2.日记操作 3.事务管理 ……等等 2.Filter 初体验 要求：在你的 web 工程下，有一个 admin 目录。这个 admi
第二章 基础特性
Gene_zhen的博客
09-13 414
第二章 基础特性 一、Vue实例及选项 //语法格式 var vm = new Vue ({ //选项 }) 1、挂载元素（3种方式） <div id = "box" class = "box"> </div> //方式1 var vm = new Vue({ el: '#box' }) //方式2 var vm = new Vue({ el: '.box' }) //方式3 var vm = new Vue({ el: 'div' }) 2、数据 da
vue2.0 filters 过滤器简单使用
最新发布
zzll1216的博客
09-16 101
vue2.0 filters 过滤器简单使用
Vue filters过滤器的使用方法
08-29
Vue filters过滤器的使用方法 Vue filters过滤器是 Vue.js 框架中的一种功能强大且便捷的数据处理方法。通过使用 filters，我们可以根据业务场景对数据进行处理，例如对数据进行格式化、计算、过滤等操作。在本文...
vue自定义filters过滤器
08-27
Vue 自定义 filters 过滤器 Vue 自定义 filters 过滤器是 Vue 框架中的一种强大功能，允许开发者创建自己的过滤器，以便在模板中进行数据处理和格式化。在这个知识点中，我们将详细介绍 Vue 自定义 filters 过滤器...
Vue3不支持Filters过滤器的问题
01-18
filters过滤器已从Vue 3.0中删除，不再支持。 2.x 语法 在2.x中，开发人员可以使用过滤器来处理常见的文本格式。 <h1>Bank Account Balance <p>{{ accountBalance | currencyUSD }} [removed] export default ...
vue从入门到进阶：过滤器filters（五）
weixin_33860553的博客
01-22 102
Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示： &lt;!-- 在双花括号中 --&gt; {{ message | capitalize }} &lt;!-- 在 `v-bind` 中 --&...
Filter过滤器的理解及应用
qq792020962的博客
03-06 2298
最近在学习JAVAWEB相关的内容，学习过servlet之后现在在学习过滤器，以下是我对filter过滤器的理解。      顾名思义，过滤器就是一个用来过滤某些东西的机器。就好像我们生活中的漏斗一样，将需要的留下并收集起来用作它途，将不需要的过滤下去再进行其他处理，比如可以将这些过滤掉的东西直接丢掉。它的中心作用就是‘过滤’！它有权选择要过滤的东西和对过滤之后的东西如何进行处理。具体到java
Fiddler工具 — Fiddler过滤器（Filters）详解
测试萌萌
06-15 1万+
1、Filters介绍 Filters：过滤器，帮助我们过滤请求。 如果需要过滤掉与测试项目无关的抓包请求，更加精准的展现抓到的请求，而不是杂乱的一堆，那功能强大的 Filters 过滤器能帮到你。 总结：Filters过滤器的作用，过滤出我们想要的请求，不需要的请求忽略掉。 2、Filters界面说明 Filters界面如下图： 说明： Use Filters(使用过滤)：这个勾选之后，过滤器才会生效。 Actions（指定行为）：四个选项说明 Run Filterset now：使用当前的过滤规.
Java Web之过滤器（Filter）
热门推荐
喻志强的博客
07-31 21万+
过滤器(Filter) 过滤器实际上就是对web资源进行拦截，做一些处理后再交给servlet。 通常都是用来拦截request进行处理的，也可以对返回的response进行拦截处理 大概流程图如下 应用场景 自动登录 统一设置编码格式 访问权限控制 敏感字符过滤等...
Filter过滤器
qq_48325875的博客
03-29 1886
文章目录Filter Filter
Java三大器之过滤器（Filter）的工作原理和代码演示
reggergdsg的博客
10-15 9万+
一、Filter简介 　　Filter也称之为过滤器，它是Servlet技术中最激动人心的技术之一，WEB开发人员通过Filter技术，对web服务器管理的所有web资源：例如Jsp, Servlet, 静态图片文件或静态html文件等进行拦截，从而实现一些特殊的功能。例如实现URL级别的权限访问控制、过滤敏感词汇、压缩响应信息等 一些高级功能。 　　Servlet API中提供了
vue filters过滤器的用法
qq_43146962的博客
02-25 625
1、过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。 <!-- 在双花括号中 --> {{ message | capitalize }} <!-- 在 `v-bind` 中 --> <div :id="message | capitalize"></div> 你可以在一个组件的选项中定义本地的过滤器： data() { message: '' } filters: { capitalize: fun
vue初学篇----过滤器（filters）
人生有点bug的程序员的博客
11-09 5万+
过滤器使用，直接上代码 &lt;template&gt; &lt;div class="filters"&gt; &lt;h1 v-text="filtersTitle"&gt;&lt;/h1&gt; &lt;input v-model="filtersText"/&gt; &lt;div&gt;{{filtersText
教你VUE中的filters过滤器2种用法
开源世界
04-02 3235
前言 Vue.js 允许我们自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号（{undefined{ }}）插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示。 <!-- 在双花括号中 --> <div>{{ message | capitalize }}</div> <!-- 在 `v-bind` 中 --> <div v-bind
java filter 不过滤器_Java中的Filter过滤器
weixin_36131782的博客
02-13 671
Filter简介Filter也称之为过滤器，它是Servlet技术中最实用的技术，Web开发人员通过Filter技术，对web服务器管理的所有web资源：例如Jsp, Servlet, 静态图片文件或静态 html 文件等进行拦截，从而实现一些特殊的功能。例如实现URL级别的权限访问控制、过滤敏感词汇、压缩响应信息等一些高级功能。它主要用于对用户请求进行预处理，也可以对HttpServletRes...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值