Vue进阶（幺肆幺）：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>

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
 

computed计算属性：

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

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
 

文章来源: shq5785.blog.csdn.net，作者：No Silver Bullet，版权归原作者所有，如需转载，请联系作者。

原文链接：shq5785.blog.csdn.net/article/details/108483901