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. Message高级特性 & 内嵌Jetty实现文件服务器

    1. Messaage Properties  常见属性 更多的属性以及介绍参考:http://activemq.apache.org/activemq-message-properties.html ...

  2. iOS程序依赖管理的工具——CocoaPods

    1. 简介 CocoaPods是一个负责管理iOS项目中第三方开源代码的工具,其源码在Github上开源.使用CocoaPods可以节省设置和更新第三方开源库的时间并提高工作效率. 2. CocoaP ...

  3. java http post/get 服务端和客户端实现json传输

    注:本文来源于<java http post/get 服务端和客户端实现json传输> 最近需要写http post接口所以学习下. 总的还是不难直接上源码! PostHttpClient ...

  4. thymleaf th:text="|第${user.courseSort}课|" 对于不知道的真的是解渴了

    简单描述:最近再做一个课程管理,列表显示第几课,但是后台传递过来的只是数字0~9,意味着,我得自己拼了ヾ(◍°∇°◍)ノ゙  我最烦的就是这种拼,各种难调,果真和我想的一样,4.5遍了还没出来. 我的 ...

  5. 【算法】BILSTM+CRF中的条件随机场

    BILSTM+CRF中的条件随机场 tensorflow中crf关键的两个函数是训练函数tf.contrib.crf.crf_log_likelihood和解码函数tf.contrib.crf.vit ...

  6. Niagara帮助文档资料整理

    1.任何软件额发布都会有说明文档,有的不会附具体实践的操作步骤,存在不懂得问题一般可以通过查看榜文文档解决问题 一些软件的帮助文档是一PDF格式存储在软件安装的目录下面,如Niagar workben ...

  7. 在被vue组件引用的 js 文件里获取组件实例this

    思路: 通过调用函数 把 组件实例this  传递 到 被应用的 js文件里 实例: 文件结构 在SendThis.vue 文件中引用 了modalConfig.js import modalConf ...

  8. C++智能指针剖析(下)boost::shared_ptr&其他

    1. boost::shared_ptr 前面我已经讲解了两个比较简单的智能指针,它们都有各自的优缺点.由于 boost::scoped_ptr 独享所有权,当我们真真需要复制智能指针时,需求便满足不 ...

  9. linux条件判断:eq、ne、gt、lt、ge、le

    -eq(equal) :判断是否相等,相等为真 -ne(inequality):判断是否不等,不等为真 -gt(greter than):判断是否大于,大于为真 -lt(less than):判断是否 ...

  10. 重新拾取:TFS2017钉钉机器人源代码签入通知

    http://www.cnblogs.com/79039535/p/9316791.html 现在很多公司办公都使用钉钉打卡签到,于是鉴于公司也使用钉钉就打算用钉钉来做一个源代码签入通知. 首先先去打 ...