有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

Vue计算属性computed方法内传参(实现方式)

vue 炮渣日记 1个月前 (11-07) 57次浏览 已收录 0个评论 扫描二维码

前言

在前期博文《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;         
            }           
        } 
    }
}
喜欢 (0)
炮渣日记
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址