In the previous blog “Advanced Vue (84) : The Use and difference of Computed data and Watch in Vue”, I explained the use and difference of Computed data and Watch in Vue. Among them, I only introduced how to calculate element attributes through Computed data, but did not introduce how to pass parameters. This post focuses on how to pass parameters using computed attributes.

The scene is introduced into

In the process of front-end project development, there will be code value conversion application scenarios, and there will be multiple code value conversion in different pages. In order to improve the code consumption rate, it is considered to extract the code value conversion function as a public function. After the public function returns the transcoded text, how to display it reasonably in the page? I tried method invocation, but unfortunately the text after transcoding is not displayed on the page. In this case, computed attribute is considered. To apply computed attribute in the result list, the code value of the list data needs to be passed in, but computed attribute cannot be directly transmitted in VUE.

Closure functions (also known as anonymous functions) can be used if there is a need to pass parameters such as data filtering.

Such as:

<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)" > delete < / a > < / td > < / tr >Copy the code

Computed attributes:

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