ue 进阶（幺肆幺）：Vue 计算属性 computed 方法内传参

关注

发布于: 刚刚

一、前言

在前期博文《Vue进阶（八十四）：vue中Computed 和 Watch的使用和区别》中，讲解了vue中Computed 和 Watch的使用和区别，其中，只是介绍了computed如何计算元素属性，并未介绍如何方法传参。本篇博文主要讲解下如何利用computed的计算属性进行传参。

二、场景引入

在前端项目开发过程中，会遇到码值转换应用场景，且不同页面会存在复用码值转换情况，为提升代码服用率，考虑将码值转换函数抽取为公共函数，在公共函数返回转码后的文字后，如何在页面中合理展示？尝试过方法调用，但是遗憾的是转码后的文字并未在页面展示，此时考虑使用computed计算属性，在结果列表中应用computed计算属性，需要传入列表数据的码值，但vue中computed计算属性无法直接进行传参。

如果有传参数的需求比如说做数据筛选功能可以使用闭包函数（也叫匿名函数）实现。

例如：

<tr v-for="(item,index) in arr" v-if="myfilter(index)">    <td>{{item.username}}</td>    <td>{{item.sex}}</td>    <td>{{item.grade}}</td>    <td>        <a href="#" @click="delClick(index)">删除</a>    </td></tr>

复制代码

应用computed计算属性：

export default {    name: 'Achievement',    data () {        return {            ...        }    },    methods: {        ...    },    computed: {        myfilter() {            return function(index){                return this.arr[index].username.match(this.name)!==null;                     }                   }     }}

复制代码

三、拓展阅读

发布于: 刚刚阅读数: 2

原文链接:【http://xie.infoq.cn/article/67f3857088b9f8cb024dac35b】。文章转载请联系作者。

No Silver Bullet

关注

No Silver Bullet 2021.07.09 加入

岂曰无衣与子同袍

发布

暂无评论

创作场景

ue 进阶（幺肆幺）：Vue 计算属性 computed 方法内传参

一、前言

二、场景引入

三、拓展阅读

No Silver Bullet

评论