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. Pytorch划分数据集的方法

    之前用过sklearn提供的划分数据集的函数,觉得超级方便.但是在使用TensorFlow和Pytorch的时候一直找不到类似的功能,之前搜索的关键字都是"pytorch split dat ...

  2. LeetCode第二十一题-对两个有序链表排序

    Merge Two Sorted Lists 问题简介:合并两个已排序的链表并将其作为新链表返回 举例: 输入: 1->3->5, 1->2->4 输出: 1->1-&g ...

  3. 两个MMCM共享时钟输入时的严重警告和错误

    情景描述: 芯片:zynq7020 问题: 设计从FPGA的U19引脚上的开发板板接收时钟输入125M,并将其送到两个MMCM.使用软件:vivado2015.4在Vivado中打开合成设计后,我得到 ...

  4. 删除Win10资源管理器中的3D对象/音乐/视频文件夹

    Win10如何删除资源管理器中的3D对象/音乐/视频等文件夹?使用Win10系统的用户都知道,打开此电脑之后,资源管理上面会显示文档/音乐/视频等7个文件夹,一些用户认为很少使用到它们,想要除之而后快 ...

  5. ubuntu系统检测端口占用情况

    参考链接: https://blog.csdn.net/qwfys200/article/details/80837036 命令: $ sudo netstat -tupln

  6. hdu2181 简单搜索

    题意: 一个规则的实心十二面体,它的 20个顶点标出世界著名的20个城市,你从一个城市出发经过每个城市刚好一次后回到出发的城市. Input前20行的第i行有3个数,表示与第i个城市相邻的3个城市.第 ...

  7. 【mongo】查询超时处理

    使用no_cursor_timeout collection = self.db[tb_name] cols = collection.find(no_cursor_timeout=True) for ...

  8. 使用npm命令,而不用cnpm命令,也可以得到同样的体验

    以前大家都知道使用cnpm命令来替代npm,可以大大提升下载各种包的速度.例如: npm install -g cnpm --registry=https://registry.npm.taobao. ...

  9. .net基础学java系列(六)Java基础

    一.废话 .net学java为何一直没入坑?其实大家都知道,语法很相似,就是使用的习惯不同 稍微的语法差异 结构体系不同 IDE不同 类库集不同 各种框架不同 对于我来说,我一直被第三道坎拦住了,所以 ...

  10. mysql8.0 定时创建分区表记录 每天定时创建下一天的分区表

    因单表数据太大, 需要表按时间分区 分区字段 pay_out_date 按天分 要求自动创建 1. 创建分区表 MYSQL的分区字段,必须包含在主键字段内 常见错误提示 错误提示:#1503 A PR ...