Vue中的computed、filters的异同以及应用场景

最新推荐文章于 2024-07-28 19:41:36 发布
最新推荐文章于 2024-07-28 19:41:36 发布
阅读量1.7k 收藏 2
点赞数 4
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43378800/article/details/98778111
版权

computed和filters的异同
异:
computed:
1.不能传参,只能监听预先设置好的值;
2.值会缓存,在我们要监听的数据没有变化的时候，是不会再去执行对象相应的数据的(性能比较好)

filters:
1.将返回数据进行处理后返回处理结果的简单函数
2.值不会缓存,会重新执行里面的操作

同:所得到的值都需要return出去

应用场景:
当传递的值不一样时,是不能用计算属性的
例如:当我需要获取到这里歌曲的时间,每一行的时间是不同的,我们从接口中的duration
中获取到的多少毫秒,就需要换算成对应的分钟,当每一行的值不一样时,我们必须要使用到过滤器,将图二中item.duration的值传进来

如果这里是计算属性,它不能传值(虽然他本质也是一个函数,但是他永远只能根据自己返回的是什么就是什么)

在这里插入图片描述
如果在这里你真的定义了一个计算属性,那你拿值是很不方便的,假设你的值保存在数组中,那你还要遍历数组,但你计算到下标i的时候,就需要返回出去了(图四示例)
在这里插入图片描述在这里插入图片描述

错误示例

风里有诗句
关注
专栏目录
详解 React 常用的一些钩子函数（对比vue）
chenyajundd的博客
01-18 982
在React中，钩子函数是处理状态、副作用和上下文等方面关键的工具。本文将以Vue的视角对React中常用的钩子函数进行详细对比和学习，帮助你更好地理解这些工具的使用和优势。通过对比学习，你将能够更快速地掌握React的钩子函数，并在React和Vue之间更流畅地切换。提升你的前端开发技能，深入了解这两个流行框架的异同。
VUE面试题
qq_51050856的博客
05-27 412
标题1, 如何让CSS只在当前组件中起作用(vue中如何实现样式隔离)？ 在组件中的style前面加上scoped 标题2, 的作用是什么? keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。 标题3, vue组件中如何获取dom元素? 使用ref属性获取, 在组件模板元素中添加ref属性, 在js中用this.$refs获取 标题4, 说几个vue中的指令和它的用法？ v-model双向数据绑定； v-for循环； v-if, v-show 显示与隐藏； v-b
Vue 中 filter 与 computed 的区别与用法解析
10-15
主要介绍了Vue 中 filter 与 computed 的区别与用法，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
vue filter函数的用法_Vue串联过滤器的使用场景
weixin_39786534的博客
12-12 484
平时开发中，需要用到过滤器的地方有很多，比如单位转换、数字打点、文本格式化等，比如：Vue.filter('toThousandFilter', function (value) { if (!value) return '' value = value.toString() return .replace(str.indexOf('.') > -1 ? /(d)(?=(d{3}...
Vue.js中的computed属性：高效的数据处理
最新发布
你若盛开，清风自来
07-28 1563
本文将介绍Vue.js中computed属性的特点、作用及其在实际项目中的应用，帮助读者更好地理解computed属性的重要性，提高前端开发的效率。computed属性是Vue.js中的一种数据计算方式，它允许开发者定义一个计算属性，并在需要时返回计算后的值。高效的数据处理：computed属性是基于Vue.js的响应式系统实现的，它会在依赖的数据发生变化时自动重新计算。简洁的语法：computed属性使用简洁的语法，使得代码更加简洁和易于阅读。
vue filter的使用
qq_43036190的博客
05-28 441
vue filter的使用 过滤器是什么？ 过滤器就是将后台返回的数据换一种形式输出，不改变原来的数据。 应用的场景：后台返回状态码 例如（性别，支付状态，时间 ），商品价格 过滤器： 有全局过滤器 和 局部过滤器 全局过滤器： 全局过滤器必须写在vue实例创建之前。 Vue.filter('testfilter', function (value,text) { // 返回处理后的值 return value+text }) 局部过滤器 局部过滤器必须在组件实例对象里挂载。
vue中filters和computed 、methods几个常见属性方法的区别
泥鸽鸽的博客
08-29 715
目前对filters 、computed、methods的理解如下： **filters:**多用于在模板中处理加工数据 模板中插值表达式中的值就是他的参数 在处理加工数据上非常方便 注意： filters中写的函数据说不能访问this 感兴趣的可以去测试一下 computeds:也是处理加工数据 他处理的数据一般是比较单一的 因为他没办法传参 只能在data中获取数据进行计算后返回 该属性里面的方法名相当于data属性里面的key，他可以作为key值使用，该属性里面的方法必须要有return返回值，这个
computed 、watch 和 filters 的区别
shaco335的博客
05-13 361
computed:计算属性，依赖其他属性，当其他属性改变的时候下一次获取computed值时也会改变，computed的值会有缓存。 watch：类似于数据改变后的回调，如果想深度监听的话后面加一个deep:true，如果想监听之后立即执行的话需要加上immediate:true filters:过滤器，帮助我们过滤请求 计算属性computed和过滤器filters有什么区别？ filters与computed 相同点：都必须有返回值，且可以绑定数据 不同点：filters可以传参，但是不
Vue面试88题，备战面试金选题库（欢迎补充）
m0_65892856的博客
05-18 1335
VUE简介： vue是一个构建数据驱动的web界面的渐进式框架。vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。vue.js借鉴了angular以及react的一些核心思想，总和各自的长处进行了操作以及性能等方面的优化，vue比angular简单，小，运行速度快，都有数据双向绑定，vue与react都使用virtualDOM虚拟DOM，都是提供了组件的视图组件，都有丰富的插件库，react使用jsx渲染页面，vue使用简单的模板。vue也提供了丰富的指令进行操作，同时也有生命
Vue基础6天实施笔记
weixin_44867717的博客
02-09 1927
Vue 基础课程 课程介绍 Vue基础语法 指令、过滤器、按键修饰符、生命周期、自定义指令、computed计算属性、watch监听器 axios、ES6模块化、组件、vue单文件组件、WebStorage SPA单页应用、router路由、Promise VueCLI脚手架、element-ui组件库、eslint代码规范检测等等 vue介绍 三大前端框架 Vue Vue.js (view)是一...
vue常见面试题
m0_57391092的博客
10-08 454
vue常见面试题
vue中filter的应用场景
qq_44221093的博客
11-20 827
filter一般用于过滤某些值，比如我这个字段是空，可是我想在前端显示“–”，就可以使用到它了。 最近碰到一个需求就是要给某些字段可以设置权限去以其他形式显示，比如以“***”显示需要隐藏的金额。 1.获取金额权限 2.通过filter过滤满足条件的字段 3.返回隐藏的样式 看代码： //其他的看，看我标注的就可以了 //scope.row 获取当前行 <template slot-scope="scope"> <template v-if="item.formTy
vue基础实践4: computed计算属性实例filters的运用
云端-公子清
06-03 350
vue基础实践4: computed计算属性实例filters的运用 计算属性实例filters的运用 动态绑定的值，用v-bond或者：如：:id='item.id' :v-model='',如果是静态写死的id='item.id' v-model='' <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content
VUE的watch、computed、filter的比较
qq_44144735的博客
09-04 740
watch与computed、filter： watch:监控已有属性，一旦属性发生了改变就去自动调用对应的方法 computed:监控已有的属性,一旦属性的依赖发生了改变，就去自动调用对应的方法 filter:js中为我们提供的一个方法，用来帮助我们对数据进行筛选 watch与computed的区别: 1.watch监控现有的属性,computed通过现有的属性计算出一个新的属性 2.watch不会缓存数据，每次打开页面都会重新加载一次，而computed如果之前进行过计算他会将计算的结果缓存，如果再次请
Filter定义及应用场景
sihai_1991的专栏
07-03 3058
Filter总结： 1）：Filter也称之为过滤器，它是Servlet技术中最激动人心的技术，WEB开发人员通过Filter技术， 对web服务器管理的所有web资源：例如Jsp, Servlet, 静态图片文件或静态 html 文件等进行拦截， 从而实现一些特殊的功能。例如实现URL级别的权限访问控制、过滤敏感词汇、压缩响应信息等一些高级功能。 Servlet API中提供了一个Fil
filter的使用场景
weixin_30235225的博客
09-11 201
1.filter的使用场景：假如有一个对象数组A，获取数组中的指定类型的对象放到B数组中 我们在ES5先进行for循环遍历数组，再进行if 判断，如果数组中某个对象的类型符合要求，push 到一个新数组中 var students=[ {name:"vue",type:"lesson"}, {name:"react",type:"lesson"}, ...
计算属性computed和filters过滤器
qq_44816085的博客
04-29 323
Computed 中有this存在，可以使用this 在conputed中可以通过返回一个函数的方法来实现过滤器的一个作用，使用forEach时，在forEach方法里 return 无效。且不会有返回值。 computed:{ clueNumFilter(){ return function (activityId,numName){ for(var i=0;i<this.activityGroupUserCountList.length;i++)...
【vue.js】定义vue实例的四个常用选项——filters、computed、methods、watch
weixin_39068791的博客
08-02 823
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;vue01&lt;/title&gt; &lt;script src="vue.js"&gt;&lt;/s
Vue中watch与computed监听数据变化详解及其差异
在Vue中，数据的变化监听器主要有两种方式：`watch` 和 `computed`。它们都能感知数据变化并执行相应的逻辑，但工作原理和适用场景有所不同。 **watch** `watch` 是Vue提供的一个生命周期钩子，用于监听Vue实例或...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值