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

最新推荐文章于 2024-04-24 17:07:19 发布
原创 最新推荐文章于 2024-04-24 17:07:19 发布 · 2.1k 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #前端 #javascript

本文解决了VUE项目中filters过滤器无法直接使用this的问题，提供了四种解决方案：1. 在return中声明变量_this；2. 声明全局变量；3. 页面刷新时给that赋值this；4. 使用that代替this。

问题：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
关注
Vue项目中，在filters中使用this（Vue实例对象）
郭宝的博客
05-06 6067
效果图： 方式一： 在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源码分析——第三章
Lee的博客
09-10 786
Vue源码分析——第一章 Vue源码分析——第二章 // only used in dev mode //检测 val必需是数字 function checkDuration(val, name, vnode) { if (typeof val !== 'number') { warn( "<transition> explicit " + name + " duration is not a valid number - " + "got " + ...
filters过滤器中使用this的解决方案
泥鸽鸽的博客
11-18 5366
vue 中filters过滤器不能使用this的解决方案前言：filters作为Vue中的过滤器 我们在实际开发中会经常使用到 比如在模板上格式化我们想要的日期 但是使用这个属性也会遇到一些问题 比如我们最常用的时间格式化工具moment.js 当我们把它挂载到全局的时候 会使用：方案一： 不使用fiiters这是最直接的 不使用自然就不会又问题 可以直接在模板的差值表达式中写过滤的代码 如下：方案二：使用that代替this这种方式早就为人所用 但是问题出在 不知道在哪了定义that 前言： filte
随手记：vue2 filters this指向undefined
最新发布
weixin_63515766的博客
04-24 713
vue2 filters this指向undefined
vue ---- filters过滤器中不能使用this问题
Allen-Ye博客
07-20 1526
vue ---- filters过滤器中不能使用this问题
vue处理：过滤器filters中不能引用this
Lisa_Xiaotouzi的博客
11-15 693
一般有错误，会导致页面不展示对应数据 处理方法： 1.声明对象 2.创建页面是赋值 3.引用时，直接像平时使用this一样就可以了
Vue.js中的filter：过滤器详解以及应用（对当前时间进行格式化处理）
锦鲤姑娘的博客
03-16 1504
过滤器的详细说明以及应用举例——时间格式化
Vue篇——购物车案例
J-April的博客
02-07 4725
利用Vue实现购物车的简单运用 借助layui框架实现组件（如table）的快速搭建 通过Vue实现从后端获取数据到前端的展示 实现移除书籍功能（添加和修改书籍信息功能暂未实现） 实现书籍购买数量的增加或减少，并且能够实现总价格的动态变化 … 程序效果截图 实现代码 首先导入layui的关键代码，笔者将其放在本项目的同级目录下（layui关键代码可在官方处下载，这里不再赘述） 创建html、css和JavaScript目录 html <!DOCTYPE html> <html
Vue第一天学习总结—— Vue全家桶之Vue基础(Vue概述、Vue基本使用、Vue模板语法、基础案例——选项卡、Vue常用特性、综合案例-图书管理 )
weixin_52819925的博客
08-26 688
(一) Vue概述 我使用的vue版本是v2.5.17 1. 介绍——Vue：渐进式JavaScript框架 声明式渲染→组件系统→客户端路由→集中式状态管理→项目构建 易用：熟悉HTML、CSS、JavaScript知识后，可快速上手Vue 灵活：在一个库和一套完整框架之间自如伸缩 高效：20kB运行大小，超快虚拟 DOM 框架：vue就是一个框架，提供了很多基础性服务，比如虚拟DOM技术，双向绑定技术 框架则是为解决一个(一类)问题而开发的产品 （是一个解决方案） 使用框架就不一样，我
Vue太难啦！从入门到放弃day02——vue常用特性
小陈工的博客
08-04 1000
继续学习vue的第二天，已经逐渐感觉到一点难度了，距离放弃又近了一步，大佬们赐予我力量吧！
纯CSS 移动端，根据宽度获取高度
qq_19484091的博客
05-28 642
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
vue项目中filters中的过滤方法使用this指向失效
qq_45454550的博客
08-09 1414
vue项目中filters中的过滤方法使用this指向失效 vue项目中经常会用到表格数据展示 有些数据在数据库存储是使用数字存储， 在页面展示需要用文字表达 要把这个数字转一下 可以使用vue里的过滤方法 但是在过滤方法中使用this是undefined！！！ 下面是比较实用简单的解决方案 解决方法1 定义全局变量在生命周期beforeCreate把this赋值过去， 然后在过滤方法里使用这个变量代替this 比较麻烦 解决方法2 在data里定义一个变量that赋值this，在方法参数里传进去 示例 t
vue 过滤器 filters 中取不到 this 问题解决
工作中遇到问题记录
11-04 2028
vue 过滤器 filters 中取不到 this 问题解决：定义一个that通过传参的办法取
js过滤器filter常见问题：this无法使用
zycome的博客
11-30 606
在vue开发环境中，使用filter函数时，方法体中的this指向数据无法使用。
vue如何在filter中使用this
weixin_43078608的博客
09-30 5832
filter过滤器在vue中使用的还是比较频繁，但使用中还是会遇到一些问题。如： controllerDisable(value) { if (value) { if (this.countStrlen(value) > 20) { return false; } } return true; }, 当你需要在filter使用你自定义的函数时，你会发现是undefined，这里就涉及到this指向的问题。只需要： beforeCreate: f
Vue2用计算属性（computed）替代过滤器（filter）的问题
weixin_44646986的博客
01-23 1736
在Vue2里面一般处理文本比如时间格式化，文本替换等操作时，很容易想到使用filter，但是这有个问题，filter里面是没有this的，如果想使用到Vue实例只能换成computed或者method，比如下面这个例子： <template> <view> <view v-for="(item,index) in list" :key="index"> <!-- 对应下面错误方法一 --> <Item :content="item.t
vue过滤器filters获取不到this对象的解决办法
前端打工人的博客
11-30 8765
问题：想在过滤器filters中使用this，可能需要data或者props的一个值作为过滤的条件，如果直接使用this是会报错的，因为this为undefined，那如何解决呢？下面列举几个解决办法 一、使用computed <template> {{ '1558490001000' | formatDate }} </template> <script> export default { ... filters: { formatDat
vue的filters筛选器获取this使用
番茄脸红了~
06-29 3040
vue的filters筛选器；获取this使用；
filters中的this问题，及在computed中调用函数
张大晴的博客
04-19 851
过滤器内是没有this引用的，过滤器内的this是undefined，所以不要在过滤器内尝试使用this引用组件实例的变量或者方法。 尤大大的对这个过滤器filters的说明我才发现：vue中的过滤器更偏向于对文本数据的转化，而不能依赖this上下文，如果需要使用到上下文this我们应该使用computed计算属性的或者一个method方法。 <template> <u...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值