Vue中computed的使用

ゝ一纸荒年。 2022-10-22 13:59 122阅读 0赞

# 1、需求：在vue模板中要计算某些属性，如下 #

我想要讲mes的内容给反转过来，即本来是`helloworld`，我要它变成`dlrowolleh`

方法1：  
使用原生js操作  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Njk0MDU2_size_16_color_FFFFFF_t_70]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Njk0MDU2_size_16_color_FFFFFF_t_70 1]

*  缺点：在模板里面会呈现的非常复杂，不够简洁

--------------------

方法2  
使用vue中computed属性![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Njk0MDU2_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][20210317171006277.png]

*  优点：在模板做中只需要写上函数名即可，达到一个简洁的目的，当页面模板中有大量的这样的步骤时，我们就可以统一在`computed`中处理，而不是在模板中写一大堆方法

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Njk0MDU2_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210317170545403.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Njk0MDU2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Njk0MDU2_size_16_color_FFFFFF_t_70 1]: /images/20221022/28669cf55ce34f14af4ad4de85b135ac.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Njk0MDU2_size_16_color_FFFFFF_t_70 2]: /images/20221022/d245ebf359664458984935e00e0fbb19.png
[20210317171006277.png]: /images/20221022/14a3ceecf1b14cbb9844a2471ab2e485.png

发表评论取消回复

表情：

评论列表（有 0 条评论，122人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue中computed的使用（附带例子）

一、背景遇到一个需求：将后端返回的对象数组按照其某个属性进行分类显示，自然就想到了用computed来进行二次数据处理。二、后端返回的数据格式 {

客官°小女子只卖身不卖艺/ 2024年03月22日 13:38/ 0 赞/ 16 阅读

相关 vue 页面中使用 computed缓存中的数据

vue 页面中使用 computed缓存中的数据代码如下： computed: { drCountData: {

超、凢脫俗/ 2023年07月06日 13:23/ 0 赞/ 17 阅读

相关 Vue中的computed属性

computed属性 1.computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者

冷不防/ 2023年02月17日 11:16/ 0 赞/ 22 阅读

相关使用computed_Vue中computed与method的区别

1.computed区别于method的两个核心在官方文档中，强调了computed区别于method最重要的两点 1. computed是属性调用，而methods是

逃离我推掉我的手/ 2023年01月07日 08:53/ 0 赞/ 296 阅读

相关 Vue中computed的使用

1、需求：在vue模板中要计算某些属性，如下我想要讲mes的内容给反转过来，即本来是`helloworld`，我要它变成`dlrowolleh` 方法1：使用原

ゝ一纸荒年。/ 2022年10月22日 13:59/ 0 赞/ 123 阅读

相关 Vue3中computed的使用

方式一 import { computed,reactive} from 'vue' export default { name: "Lay

怼烎@/ 2022年10月15日 01:59/ 0 赞/ 12 阅读

相关 Vue中的computed属性

computed属性是什么？ Vue中的`computed`属性称为计算属性，通过该关键字可以监听多个变量或者多个对象。如果改变的值和原值一样，那么就不会触

我就是我/ 2022年10月01日 12:56/ 0 赞/ 219 阅读

相关 Vue中的watch与computed

[Vue中的watch与computed - gunelark - 博客园][Vue_watch_computed - gunelark -] [Vue中的watch与co

绝地灬酷狼/ 2022年09月17日 05:29/ 0 赞/ 326 阅读

相关 Vue中的computed计算属性

文章目录 computed与watch的异同不同点相同点示例源码结果分析 c

旧城等待，/ 2022年04月18日 04:04/ 0 赞/ 309 阅读

相关 vue---computed计算属性的使用

一直以来在使用vue的时候，会对vue的computed属性和watch属性具体的使用分不清楚，总算花点时间整理了下。 computed:通常用于监控自己定义的变量，这个变量

落日映苍穹つ/ 2021年12月16日 07:03/ 0 赞/ 380 阅读