Vue 中的 computed 和 methods 的使用

时间: 2019-05-10阅读: 278标签: 函数
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 实例。计算属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算。注意,如果某个依赖 (比如非响应式属性) 在该实例范畴之外,则计算属性是不会被更新的。


javascript构造函数

提起构造函数,我们需要从JS的创建对象开始,JS的创建对象有两种方式,一种是对象字面量法(把一个对象的属性和方法一一罗列出来),对象字面量法有一个明显的不足在于它不适合批量的或者是构建大量的类似或者重复的对象

实现一个JS深拷贝函数

JS深拷贝概念并不新鲜,但是真正要真正理解原理还是有点难度的。这也是JS语言精粹之一吧。因为JS对于对象的赋值使用的是浅拷贝,其中一个实例变量的赋值会影响到所有指向该对象的变量

js实现KB、MB、GB、TB单位转换

当函数参数值小于等于1000时,参数除以1000,即可得到最小单位kb,赋值给变量_integer;当_integer值大于1000时,kb值除以1000,即可得到mb,赋值给变量_integer;以此类推。

js函数

在JavaScript中,函数其实就是对象。使函数不同于其他对象的决定性特点是函数存在一个被称为[[Call]]的内部属性。内部属性无法通过代码访问而是定义了代码执行时的行为。ECMAScript为JavaScript的对象定义了多种内部属性

Vue源码中用到的工具函数

以下摘取的函数,在 shared 目录下公用的工具方法。提取了一些常用通用的函数进行剖析,主要包含以下内容创建一个被冻结的空对象:判断是否是 undefined 或 null,判断是否不是 undefined 和 null

JS 自执行函数

由于自己js基础知识薄弱,很多js的知识还没有掌握,所以接下来会经常写一些关于js基础知识的博客,也算给自己提个醒吧。js自执行函数,听到这个名字,首先会联想到函数

高阶函数 - Higher Order Function

一个函数 如果输入参数包含函数 或 返回值包含函数,就称为高阶函数。按fn与fn功能是否一致【即相同输入是否始终对应相同输出】,把这类高阶函数的作用分为两类:

浅析js的工厂函数、构造函数

首先,说下工厂函数。顾名思义,就好比一个工厂一样,可以批量制造某种类型的东西。其实说白了就是封装了个方法减少重复工作,相信稍微有点码龄的人都懂。上代码:

用原生Js实现Jquery函数方法

在本文中我将把自己最常用的 jQuery 函数转换为原生 JavaScript。有时我需要创建一个简单的静态 HTML 或登录页面,而且不想引入任何库或其它依赖。对这种情况,我只使用普通的 JavaScript 来完成工作

Generator函数的语法和应用

状态机,封装了多个内部状态;返回一个遍历器对象,通过改对象可以一次遍历Generator函数内部的每一个状态;带*号,yeild表达式定义不同的内部状态;调用 Generator 函数后,该函数并不执行,返回的也不是函数运行结果

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

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

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