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 实例。计算属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算。注意,如果某个依赖 (比如非响应式属性) 在该实例范畴之外,则计算属性是不会被更新的。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。