VUE——filters过滤器中不能使用this问题

最新推荐文章于 2024-04-24 17:07:19 发布
最新推荐文章于 2024-04-24 17:07:19 发布
阅读量1.9k 收藏 4
点赞数 2
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ITold/article/details/121114321
版权

问题：VUE——filters过滤器中不能使用this问题

解决： 1、先在return中声明一个变量_this：this。

image.png

 

 2、声明一个全局变量

image.png

 

 3、在页面刷新时给that赋值this

image.png

 

4、最后that就可以当做this在filters中使用  

image.png

 

 

IT Pharaoh
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue项目中，在filters中使用this（Vue实例对象）
郭宝的博客
05-06 5661
效果图： 方式一： 在data对象中定义一个 this_ 变量，接收this（Vue实例对象），如下代码： data() { return { this_: this } } 然后声明过滤器时，在形参中加上vue filters: { teacherFiliters(value, vue) { console.log(vue) for (let i = 0; i < vue.teachers.length; i...
vue自定义filters过滤器
08-27
Vue 自定义 filters 过滤器是一种特殊的函数，它可以在模板中使用，以对数据进行处理和格式化。 filters 过滤器可以在模板中使用管道符号（|）来调用，例如：`{{ '文字文字' | readMore(15, '...') }}`。在这个例子...
Vue filters过滤器的使用方法
08-29
主要为大家详细介绍了Vue filters过滤器的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
随手记：vue2 filters this指向undefined
最新发布
weixin_63515766的博客
04-24 362
vue2 filters this指向undefined
filters过滤器中使用this的解决方案
泥鸽鸽的博客
11-18 4692
vue 中filters过滤器不能使用this的解决方案前言：filters作为Vue中的过滤器 我们在实际开发中会经常使用到 比如在模板上格式化我们想要的日期 但是使用这个属性也会遇到一些问题 比如我们最常用的时间格式化工具moment.js 当我们把它挂载到全局的时候 会使用：方案一： 不使用fiiters这是最直接的 不使用自然就不会又问题 可以直接在模板的差值表达式中写过滤的代码 如下：方案二：使用that代替this这种方式早就为人所用 但是问题出在 不知道在哪了定义that 前言： filte
vue过滤器filters获取不到this对象的解决办法
前端打工人的博客
11-30 7234
问题：想在过滤器filters中使用this，可能需要data或者props的一个值作为过滤的条件，如果直接使用this是会报错的，因为this为undefined，那如何解决呢？下面列举几个解决办法 一、使用computed <template> {{ '1558490001000' | formatDate }} </template> <script> export default { ... filters: { formatDat
vue ---- filters过滤器中不能使用this问题
Allen-Ye博客
07-20 931
vue ---- filters过滤器中不能使用this问题
纯CSS 移动端，根据宽度获取高度
qq_19484091的博客
05-28 566
html部分代码 <div class="goods_div"> <div class="goods_li"> </div> <div class="goods_li"> </div> <div class="goods_li"> </div> </div> CSS部分代码 .goods_div{width:100%;} .goods_li{width:33.33%; paddin
Vue3不支持Filters过滤器的问题
10-14
主要介绍了Vue3不支持Filters过滤器的问题,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
vue如何在filter中使用this
weixin_43078608的博客
09-30 5713
filter过滤器在vue中使用的还是比较频繁，但使用中还是会遇到一些问题。如： controllerDisable(value) { if (value) { if (this.countStrlen(value) > 20) { return false; } } return true; }, 当你需要在filter使用你自定义的函数时，你会发现是undefined，这里就涉及到this指向的问题。只需要： beforeCreate: f
filters中的this问题，及在computed中调用函数
张大晴的博客
04-19 754
过滤器内是没有this引用的，过滤器内的this是undefined，所以不要在过滤器内尝试使用this引用组件实例的变量或者方法。 尤大大的对这个过滤器filters的说明我才发现：vue中的过滤器更偏向于对文本数据的转化，而不能依赖this上下文，如果需要使用到上下文this我们应该使用computed计算属性的或者一个method方法。 <template> <u...
js过滤器filter常见问题：this无法使用
zycome的博客
11-30 369
在vue开发环境中，使用filter函数时，方法体中的this指向数据无法使用。
vue 过滤器 filters 中取不到 this 问题解决
工作中遇到问题记录
11-04 1714
vue 过滤器 filters 中取不到 this 问题解决：定义一个that通过传参的办法取
关于filters传多个参数以及解决不能调用this的问题
qq_41227106的博客
03-23 483
关于filters传多个参数以及解决不能调用this的问题
关于filters中的this
lllnnnlllll的博客
05-14 493
```css <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> </head> <body> <div class="app"> <!--小写转大写： {{ms.
Vue使用filters过滤时不能使用this的解决办法
weixin_44937463的博客
04-13 4046
Vue使用filters时将需要用到的字段(list)传过去使用 <template slot-scope="scope"> {{ scope.row.id | filter(list) }} </template> filters: { filter: (item, list) => { .... return item ...
vue3filters过滤器
07-27
引用\[1\]:在main.js中引用了一个filters.js文件，并通过循环将其中的过滤器注册到Vue实例中。\[1\] 引用\[2\]:在一个Vue实例中定义了一个名为format的过滤器，该过滤器接受三个参数，并将参数拼接成一个字符串返回。\[2\] 引用\[3\]:在另一个Vue实例中定义了一个名为ucase的过滤器，该过滤器将传入的字符串转换为大写字母并返回。\[3\] 根据提供的引用内容，我无法找到关于vue3filters过滤器的具体信息。可能是因为引用的内容中没有提到vue3filters过滤器的相关信息。如果你有更多的信息或者具体的问题，请提供更多的上下文，我将尽力帮助你解答。 #### 引用[.reference_title] - *1* [Vue中filters过滤器的封装](https://blog.csdn.net/babyxuqian/article/details/119324717)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [Vue3 之 过滤器](https://blog.csdn.net/xybhua/article/details/128913128)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [Vue (三) ---------- 过滤器](https://blog.csdn.net/m0_51111980/article/details/125055852)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值