【Vue组件eval方法的使用】

文章讲述了在Vue页面中如何使用条件判断,避免全局标识带来的维护困难。作者提倡将条件直接传递给组件,利用`v-if`和`eval`动态处理,但提到`eval`在生产环境遇到问题,导致线上运行错误。

Vue页面中条件可以放在当前vue页面中而无需影响到组件

···

这是我的表格操作列按钮,需求是第四个按钮如果表格当前数据的is_execl字段为0则显示否则隐藏
这种条件判断很频繁 如果像之前一样给一个标识,页面多了就难以维护,而且判断条件如果不一样还不便维护
灰-常难用
如果按照我的方法

hidden: "scope.row['is_execl']==0",

传递这个hidden,条件自定义也可为1,2,3等等
在组件内

...
v-if="item.hidden?isBoolean(item,scope):true"
//我们需要渲染的标签条件


...
const isBoolean = (item, scope) => {
  return eval(item.hidden);
};
//eval这个灰常好用 是把传递过来的字符转为函数、变量、等等
...

在这里插入图片描述
只需要改变hidden里边的条件就可以了
灰常好用


收回之前的话 灰常不好用

eval()方法我这边本地没问题 但是部署到线上就会报错

这样的写法
在这里插入图片描述
报下边的错
在这里插入图片描述

console.log(window.eval, eval, window.eval == eval);
在这里插入图片描述
log的结果一样

我把eval替换为window.eval
在这里插入图片描述
报下边的错并且本地都不会成功运行
上边的好歹本地会成功运行
在这里插入图片描述
鬼打墙了 邪门
灰-常不好用

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

苦瓜大大王

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值