计算属性的传值问题以及应用场景

最新推荐文章于 2024-08-19 10:12:25 发布

置顶过往深处少年蓝

最新推荐文章于 2024-08-19 10:12:25 发布

阅读量458

点赞数

分类专栏： vue 文章标签： html html5 javascript

本文链接：https://blog.csdn.net/qq_39009348/article/details/120569460

版权

vue 专栏收录该内容

58 篇文章 4 订阅

订阅专栏

本文介绍了在Vue中如何利用计算属性`computed`来处理v-for循环中的状态转换，例如将0状态映射为'未设置'。通过计算属性，可以更方便地维护页面状态，避免在多个地方手动更新状态，提高代码的可维护性。示例代码展示了在Radio-group组件中使用计算属性`processtype`根据`contractType`动态显示状态。

摘要由CSDN通过智能技术生成

问题描述：当我们在v-for的循环中需要对数组的一个状态进行转换时，如0的状态转换为“未设置”，通常在计算属性传入值进行判断即可

html：

<Radio-group v-model="select" vertical @on-change="onSelectchange">
                            <Radio :label="item.id" v-for="(item, index) in data" :key="index">
                                <span class="iconfont icon-danju iconstyle"></span>
                                <span>{{item.contractNum}}——{{processtype(item.contractType)}}</span>
                            </Radio>
                        </Radio-group>

js：

computed: {
        processtype() {
            // 闭包方式在计算属性中传参
            return function(type) {
                if (type === 'CG') {
                    return '采购'
                }
            }
        }
    },

计算属性的应用场景：前端开发一个很重要的点就是页面的状态维护，当有一个状态会跟随另一个状态改变时，不用计算属性时，那我们需要在所有涉及到改变该状态的地方都要去手动维护，而计算属性给了我们极大的便利，不需要每个地方都去手动维护，直接在计算属性维护即可，这也是好的代码该有的样子