Vue 中的 computed 和 methods 的使用

时间: 2019-05-10阅读: 1148标签: 函数
computed:在computed中的函数,是在dom加载后马上执行的
methods:在methods中的函数,必须要有一定的触发条件,才会执行 

Vue.js 将绑定表达式限制为一个表达式,如果想要实现绑定多于一个表达式的逻辑,应当使用计算属性 下面表格若要实现根据不同的角色,来显示表格中是否包含操作一列的效果,使用methods来实现逻辑的话,虽然能达到效果,但是页面加载时会有闪烁的问题,使用computed来实现逻辑,则不会出现闪烁问题。


Vue 的 computed

<!-- 表格 -->
<template>
      <Table 
        border 
        stripe 
        //在此调用了计算属性中的方法
        :columns="computeCol"     
        :data="TableData" 
      >
        <template slot-scope="{ row }" slot="action">
          <Button type="error" size="small" @click="tableDelect(row.id)"  icon="md-trash">删除</Button>
        </template>
      </Table>
</template>

<script>
      computed: {
        computeCol () {
          let columns = this.columnsTable
          if (this.nowUser.code !== 'ROLE_MANAGER') {
            columns = columns.filter(col => col.key !== 'action')
          }
          return this.columnsTable = columns
        }
      }
</script>


在计算属性中,所有 getter(读取) 和 setter(设置) 的 this 上下文自动地绑定为 Vue 实例。计算属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算。注意,如果某个依赖 (比如非响应式属性) 在该实例范畴之外,则计算属性是不会被更新的。


站长推荐

1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入

3.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/3261

JavaScript中的高阶函数

在 JavaScript 的学习过程中,我们可能或多或少地接触过高阶函数。那么,我们自己对此是否有一个明确的定义,或者说很熟练的掌握这些用法呢

工作中常用的 JavaScript 函数片段

查找数组最小,同上,不明白为什么要分成两个题目。Math.max 换成 Math.min,s>n?s:n 换成 s<n?s:n,(n,m)=>m-n 换成 (n,m)=>n-m,或者直接取最后一个元素

8个CSS函数的小技巧

CSS现在已经能实现比网站开发者预料到的更多的功能,并且随着时间的推移,样式表语言越来越强大,能实现许多原先需要依靠JavaScript才能实现的功能。在这篇文章中我们将会介绍CSS函数中8种有用的小技巧。

你也许不知道的javascript高级函数

高阶函数是对其他函数进行操作的函数,可以将它们作为参数或通过返回它们。简单来说,高阶函数是一个函数,它接收函数作为参数或将函数作为输出返回。例如Array.prototype.map,Array.prototype.filter,Array.prototype.reduce 都是一些高阶函数。

Js中函数式编程

最近和做技术的朋友聊天的时候,发现自己居然不能将函数式编程思想讲清楚,于是做一次复习,常常都能听到这么一句话:在 JavaScript 中,函数是“一等公民”,这句话到底意味着什么?

理解与使用JavaScript中的回调函数

在JavaScript中,函数是第一类对象,这意味着函数可以像对象一样按照第一类管理被使用。既然函数实际上是对象:它们能被“存储”在变量中,能作为函数参数被传递,能在函数中被创建,能从函数中返回。

JavaScript中的构造函数

ECMAScript 中,构造函数与其他函数的唯一区别,就在于调用它们的方式不同。不过,构造函数毕竟也是函数,不存在定义构造函数的特殊语法。任何函数,只要通过 new 操作符来调用

工作中常用的JavaScript函数片段

返回已 size 为长度的数组分割的原数组;检查数组中某元素出现的次数;扁平化数组默认 depth 全部展开;对比两个数组并且返回其中不同的元素

10个非常实用的Js工具函数

生成一周时间new Array 创建的数组只是添加了length属性,并没有实际的内容。通过扩展后,变为可用数组用于循环,类型判断判断核心使用Object.prototype.toString,这种方式可以准确的判断数据类型。

Javascript之尾调用

尾调用是函数式编程的一个重要的概念,本篇文章就来学习下尾调用相关的知识。有说过在一个函数中输出一个函数,则这个函数可以被成为高阶函数。本文的主角尾调用和它类似,如果一个函数返回的是另一个函数的调用结果,那么就被称为尾调用。

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广