Vue中computed( )使用场景

本文讲述了在Vue开发中如何巧妙运用computed属性来优化代码,避免重复调用方法。通过一个实例,作者展示了如何将数字等级1,2,3,4转换为文本描述"四级", "三级", "二级", "一级",并指出computed的get方法在数据不需双向绑定时的高效性,提醒开发者注意其与v-model的使用场景差异。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Vue中computed( )使用场景

以前在学习vue时总领悟不到computed的使用场景,觉得methods就够了。

今天遇到的问题让我想起尝试使用computed,发现特别方便!

问题是需要将原来的1,2,3,4更改为四级,三级,二级,一级。数据有的从数据库提取展示,有的是录入后传给数据库。

1、之前使用的方法是在得到riskLevelKey以后转成riskLevel。(截图只是调用的其中一次,该页面有多次调用,解决的痛点就在这里)请添加图片描述

2、使用computed( )以后只需要将中换成riskLevel即可,根本不需要在每次都调用一次modifyRiskPoint( ),一劳永逸!
请添加图片描述
请添加图片描述
最后需要注意的是computed虽然有set方法,但是一般不使用,所以不能用v-model,否则会有警告,毕竟v-model是双向绑定,只有get没有set当然会警告啦。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值