vue,jsx里自定义指令的写法
用原生vnode
的数据格式使用自定义指令:
注意属性名一定是directives
!!!不能改!
// 格式
const directives = [
{ name: 'permission', value: ['hangup'], modifiers: {} }
]
return <div ...{ { directives }}></div>
// 实例
render: (h: any, scope: any) => {
let directives, comp = ''
if(scope.row.payment_status === '付款成功') {
if(scope.row.is_hang === 1) {
directives = [
{ name: 'permission', value: ['hangup'], modifiers: {} }
]
comp = <el-button type="text" on-click={() => this.handleEvent('hangup', scope.row)} {...{ directives }}>挂起</el-button>
} else {
directives = [
{ name: 'permission', value: ['cancelHangup'], modifiers: {} }
]
comp = <el-button type="text" on-click={() => this.handleEvent('cancelHangup', scope.row)} {...{ directives }}>取消挂起</el-button>
}
}
return (
{comp}
)
}
317 声望
6 粉丝
推荐阅读
h5通过ping++集成几种支付
此文章为记录学习使用。如有谬误,烦请各位大佬指教(鞠躬介绍h5页面,集成了微信浏览器环境支付(wx_pub)支付宝手机网站支付(alipay_wap)微信小程序支付(wx_lite)app支付(与我司app交互,由app调起微信app...
ever阅读 691
Vue中的diff算法
diff算法是一种通过同层的树节点进行比较的高效算法,避免了对树进行逐层搜索遍历,所以时间复杂度只有 O(n)。diff算法的在很多场景下都有应用,例如在 vue 虚拟 dom 渲染成真实 dom 的新旧 VNode 节点比较更新时...
款冬赞 27阅读 14.2k评论 7
【已结束】SegmentFault 思否写作挑战赛!
SegmentFault 思否写作挑战赛 是思否社区新上线的系列社区活动在 2 月 8 日 正式面向社区所有用户开启;挑战赛中包含多个可供作者选择的热门技术方向,根据挑战难度分为多个等级,快来参与挑战,向更好的自己前进!
SegmentFault思否赞 20阅读 5.1k评论 10
vue-property-decorator使用手册
@Component 装饰器可以接收一个对象作为参数,可以在对象中声明 components ,filters,directives等未提供装饰器的选项,也可以声明computed,watch等
似曾相识赞 17阅读 29.6k评论 7
前端开发工具
前端教程阿西河前端教程丨一个助你成为全栈开发的网站前端高手进阶JavaScript利用js实现表单的校验KeyCode 查询表现代 JavaScript 教程时间戳(Unix timestamp)转换工具HTML minifierJavaScript代码压缩-js代码压...
寒青赞 14阅读 2.6k
万字长文~vue+express+mysql带你彻底搞懂项目中的权限控制(附所有源码)
所谓的权限,其实指的就是:用户是否能看到,以及是否允许其对数据进行增删改查的操作,因为现在开发项目的主流方式是前后端分离,所以整个项目的权限是后端权限控制搭配前端权限控制共同实现的
水冗水孚赞 11阅读 1.5k
[译]Vue.js + Astro 比 Vue SPA 更好吗?
在本文中,我将向您展示如何使用 Astro 构建基于 Vue 的应用程序,我们将了解其独特的架构如何带来比单页应用程序 (SPA) 更好的性能。
杭州程序员张张赞 7阅读 4.2k评论 3
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。