filters过滤器

这是通过过滤器写的一个只显示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) {//如果字串长度大于10return value.substr(0, 10) + "...";//返回前10个字符} else {return value;}}}})</script>
</body></html>

filters过滤器相关推荐

vue 多个filters_vue自定义filters过滤器
官方给出在项目中我们如果有多个filters,那么我怎么一次注册,全局可用,我们在项目里新建一个filters文件夹,如下,index.js是出口文件,readMore是一个对字符串做处理的过滤器 ...
vue中动态设置style样式和使用filters过滤器设置样式
例如:想给图片增加高度和宽度 <el-image :class="classRotation"v-if="imageData.src !== undefined&q ...
Asp.Net MVC 3【Filters(过滤器)】
这里分享MVC里的Filters(过滤器),什么是MVC里的过滤器,他的作用是什么? 过滤器的请求处理管道中注入额外的逻辑.他们提供了一个简单而优雅的方式来实现横切关注点.这个术语是指所有对应用程序的 ...
filters过滤器的简单使用
这篇文章主要就是介绍了filters过滤器的基础使用,需要的朋友可以参考一下不使用过滤器的代码: <template><div><h1>{{date}}</ ...
Vue3不支持Filters过滤器
filters过滤器已从Vue 3.0中删除,不再支持. 2.x 语法在2.x中,开发人员可以使用过滤器来处理常见的文本格式. <template><h1>Bank Acco ...
【看好了】如何使用fiddler实现手机抓包，Filters过滤器！
目录一.Fiddler与其他抓包工具的区别二.Fiddler的工作原理三.使用fiddler实现手机抓包四.Filters过滤器一.Fiddler与其他抓包工具的区别 1.Firebug虽然 ...
Vue3 - filters 过滤器为什么被移除放弃？取而代之的解决方案又是什么？
前言对比 Vue2 ,引出并展开 Vue3 . 本文讲述了 filters 过滤器为什么在 Vue3 中被移除不再支持并总结原因,以及 Vue3 用什么解决方案代替过滤器. 回忆 Vue2 在 Vu ...
vue filters过滤器与字典项
vue filters过滤器与字典项功能介绍: 大致需求: 具体实现: 一.过滤器js文件: 二.引入并使用: 功能介绍: 在项目开发中,会遇到后台返回值为数字.字母等格式数据,具体显示则需根据字典 ...
android 低频过滤器,Filters过滤器简介
原标题:Filters过滤器简介什么是过滤器? 滤波器是能够在衰减其他频率的同时传递(或放大)某些频率的电路.因此,滤波器可以从也包含不期望或不相关频率的信号中提取重要频率. 在电子领域,有许多过滤 ...
Vue中filters过滤器无效的原因
Vue中filters过滤器无效的原因如果你的过滤器内部需要用到循环请不要使用map函数代替for循环或者是foreach循环如图: 因为过滤器本身需要一个return 把结果返回出去然而ma ...

filters过滤器

filters过滤器相关推荐

最新文章

热门文章