vue中computed计算属性无法直接进行传参

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

例如:

在上篇博客vue安装使用最后的成绩表练习中的过滤功能的实现:

<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;
}
}
}
}

vue中计算属性computed方法内传参的更多相关文章

  1. 浅谈Vue中计算属性computed的实现原理

    虽然目前的技术栈已由Vue转到了React,但从之前使用Vue开发的多个项目实际经历来看还是非常愉悦的,Vue文档清晰规范,api设计简洁高效,对前端开发人员友好,上手快,甚至个人认为在很多场景使用V ...

  2. 浅谈Vue中计算属性(computed)和方法(methods)的差别

    浅谈Vue中计算属性(computed)和方法(methods)的差别 源码地址 methods方法和computed计算属性,两种方式的最终结果确实是完全相同 计算属性是基于它们的响应式依赖进行缓存 ...

  3. Vue.js 计算属性(computed)

    Vue.js 计算属性(computed) 如果在模板中使用一些复杂的表达式,会让模板显得过于繁重,且后期难以维护.对此,vue.js 提供了计算属性(computed),你可以把这些复杂的表达式写到 ...

  4. vue中计算属性的get与set方法

    计算属性get set方法 在vue的计算属性中,所定义的都是属性,可以直接调用 正常情况下,计算属性中的每一个属性对应的都是一个对象,对象中包括了set方法与get方法 computed:{ ful ...

  5. vue的计算属性与方法的不同

    计算属性 vue的模板里可以使用表达式,但是它的设计初衷是用于简单计算,在模板中放入太多逻辑会让模板过重且难以维护.例如: <div id="example"> {{ ...

  6. Vue之计算属性Computed和属性监听Watch,Computed和Watch的区别

    一. 计算属性(computed) 1.计算属性是为了模板中的表达式简洁,易维护,符合用于简单运算的设计初衷. 例如: <div id="app"> {{ myname ...

  7. vue的计算属性computed和监听器watch

    <template> <div> this is A.vue <br> <!--计算属性--> <label for="msg" ...

  8. vue中计算属性中的set和get

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <body& ...

  9. Vue中计算属性(computed)和监听属性函数watch的比较

    1.计算属性适用的情形我们可能会有这样的需求,一个数据属性在它所依赖的属性发生变化时,也要发生变化,这种情况下,我们最好使用计算属性.例如在下面这个例子中,如果我们使用监听函数,代码就会变得有点冗余. ...

随机推荐

  1. Spring框架-IOC和AOP简单总结

    参考博客: https://blog.csdn.net/qq_22583741/article/details/79589910 1.Spring框架是什么,为什么,怎么用 1.1 Spring框架是 ...

  2. 2018-2019-2 20165231王杨鸿永《网络对抗》Exp1 PC平台逆向破解

    实践目标 本次实践的对象是一个名为pwn1的linux可执行文件. 该程序正常执行流程是:main调用foo函数,foo函数会简单回显任何用户输入的字符串. 该程序同时包含另一个代码片段,getShe ...

  3. nb-iot简介【转】

    转自:http://www.elecfans.com/tags/nb-iot/ 标签 > nb-iot nb-iot 关注 118人关注 提供NB-IoT技术特点,NB-IoT模块/芯片,NB- ...

  4. 【easy】653. Two Sum IV - Input is a BST

    BST树求得两个节点的和是target //因为是BST所以中序遍历得到的是递增数组 //这个题的方法就是在一个递增数组中找到两个数的和相加是目标结果 /** * Definition for a b ...

  5. 【Selenium】各浏览器(firefox,chrome,ie)驱动下载地址汇总

    前两天使用Selenium分布式时,总抛出异常.更新成最新驱动可以解决.其中chrome异常如下, "platform": "WINDOWS" File &qu ...

  6. JAVA 类的定义(定义一个类,来模拟“学生”)

    package Code413;/*定义一个类,来模拟“学生”属性 (是什么) 姓名 年龄行为(能做什么) 吃饭 睡觉 学习对应到Java的类当中 成员变量(属性) String nanme; //姓 ...

  7. rsync问题

    问题一: rsync: chgrp "/data/www/vhosts/go/.rest.qXYFW5" (in apache) failed: Operation not per ...

  8. springboot整合mybatis开发

    1创建项目,在启动类上添加映射扫描注解 2导入依赖,添加mybatis generator自动生成代码插件 <!-- mybatis generator 自动生成代码插件 --> < ...

  9. 网页常用Js代码

    1.后退前进 <input type="button" value="后退" onClick="history.go(-1)"> ...

  10. ansible小技巧

    出现带'u'的 unicode编码, 在python里 .encode()回去,尤其是经过shell处理的,最好在shell中使用jinja2来处理一下 最好这种情况在shell模块使用jinja2的 ...