Vue 中的 computed 和 methods 的使用

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


ES6 Array.find()和findIndex()函数用法

ES6为Array增加了find(),findIndex函数。find()函数用来查找目标元素,找到就返回该元素,找不到返回undefined,而findIndex()函数也是查找目标元素,找到就返回元素的位置,找不到就返回-1。

JS函数提升和变量提升

函数声明(function declaration),通过function 关键字,functionName函数名,arg参数(可选)定义的函数。函数表达式: 将函数声明赋值给一个变量,这个表达式叫做函数表达式

ES6箭头函数

传统的javascript函数语法并没有提供任何的灵活性,每一次你需要定义一个函数时,你都必须输入function () {},这至少会出现两个问题,ES6箭头函数都圆满解决了它,箭头函数内的this值继承自外围作用域。运行时它会首先到它的父作用域找,如果父作用域还是箭头函数

Jquery的toggle()函数

toggle()函数用于切换元素的显示/隐藏 jQuery还有一个同名的事件函数,toggle(),用于绑定click事件并在触发时轮流切换执行不同的事件处理函数。

Js中document.execCommand()函数的使用

document.execCommand()方法处理Html数据时常用语法格式如下:document.execCommand(sCommand[,交互方式, 动态参数])其中:sCommand为指令参数(如下例中的”2D-Position”),交互方式参数如果是true的话将显示对话框,如果为false的话,则不显示对话框

Js函数表达和闭包

函数声明提升:函数可以先用,声明在下面自动给提到上面来,函数表达式=后面的是匿名函数,又叫拉姆达函数,他一般可以被用来当成值使用(可以用来return),函数自己调用自己就叫递归,没啥好说的。当函数赋值给另一个函数时会导致重新调用函数名称不同而调用失败

js中的toString和valueOf

基本上,所有JS数据类型都拥有valueOf和toString这两个方法,null除外。它们俩解决javascript值运算与显示的问题。所有对象继承了两个转换方法:每个JavaScript固有对象的 valueOf 方法定义不同。

javascript封装函数

使用函数有两步:1、定义函数,又叫声明函数, 封装函数。2、调用函数var 变量 = 函数名(实参);对函数的参数和返回值的理解

什么时候不该使用es6箭头函数?

箭头函数带来了很多便利。恰当的使用箭头函数可以让我们避免使用早期的.bind()函数或者需要固定上下文的地方并且让代码更加简洁。箭头函数也有一些不便利的地方。我们在需要动态上下文的地方不能使用箭头函数:定义需要动态上下文的函数

vue生命周期简介和钩子函数

简单的来说一下vue的生命周期函数:beforeCreate el 和 data 并未初始化,created 完成了data数据的初始化,el没有,beforeMount 完成了虚拟el和data初始化

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

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

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