浅谈Vue 中的 computed 和 methods 的使用

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.columnsTableif (this.nowUser.code !== 'ROLE_MANAGER') {columns = columns.filter(col => col.key !== 'action')}return this.columnsTable = columns}}
</script>
复制代码

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

转载于:https://juejin.im/post/5cd3bed76fb9a03240191255

浅谈Vue 中的 computed 和 methods 的使用相关推荐

vue 给checkbox 赋值_浅谈vue中关于checkbox数据绑定v-model指令的个人理解
vue.js为开发者提供了很多便利的指令,其中v-model用于表单的数据绑定很常见, 下面是最常见的例子: {{msg}} js里data初始化数据 new Vue({ el: "#myA ...
java get请求数组,浅谈vue中get请求解决传输数据是数组格式的问题
qs的stringify接收2个参数,第一个参数是需要序列化的对象,第二个参数是转化格式,一般默认格式是给出明确的索引,如:arr[0]=1&arr[1]=2 //indices是index的 ...
浅谈Vue中的虚拟DOM
Virtual DOM 是JavaScript按照DOM的结构来创建的虚拟树型结构对象,是对DOM的抽象,比DOM更加轻量型为啥要使用Virtual DOM 当然是前端优化方面,避免频繁操作DOM, ...
vue 中provide的用法_浅谈vue中provide和inject 用法
一.概念解析成对出现:provide和inject是成对出现的作用:用于父组件向子孙组件传递数据使用方法:provide在父组件中返回要传给下级的数据,inject在需要使用这个数据的子辈组件或 ...
vue 中provide的用法_[转]浅谈vue中provide和inject 用法
provide:Object | () => Object inject:Array | { [key: string]: string | Symbol | Object } provide ...
浅谈Vue中的Prop
Prop 基本用法 Prop的基本用法很简单,只需要在子组件的Vue实例中定义该属性并把值设为目标属性的数组即可 Vue.component('child', {...// 接收messageprop ...
父子组建传值_浅谈Vue父子组件和非父子组件传值问题
本文介绍了浅谈Vue父子组件和非父子组件传值问题,分享给大家,具体如下: 1.如何创建组件 1.新建一个组件,如:在goods文件夹下新建goodsList.vue goodsList组件 expor ...
anchor锚点 antvue_浅谈vue 锚点指令v-anchor的使用
如下所示: export default { inserted: function(el, binding) { el.onclick = function() { let total; if (bi ...
linux中whoami命令的作用是,浅谈linux中的whoami与 who指令
浅谈linux中的whoami与 who指令 whoami 功能说明: 显示用户名称语法: whoami 补充说明: 显示自身的用户名称,本指令相当于执行 id -un 指令 whoami 与 w ...
python中scipy.optimize_浅谈SciPy中的optimize.minimize实现受限优化问题
问题描述:有一批样本x,每个样本都有几个固定的标签,如(男,24岁,上海),需要从中抽取一批样本,使样本总的标签比例满足分布P(x),如(男:女=49%:51%.20岁:30岁=9%:11%..... ...

浅谈Vue 中的 computed 和 methods 的使用

浅谈Vue 中的 computed 和 methods 的使用相关推荐

最新文章

热门文章