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

最新推荐文章于 2024-04-24 17:07:19 发布
最新推荐文章于 2024-04-24 17:07:19 发布
阅读量2k 收藏 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
关注
Vue项目中，在filters中使用this（Vue实例对象）
郭宝的博客
05-06 5893
效果图： 方式一： 在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...
Vue3基础（1）——基本使用步骤、基础指令与过滤器
SongD1114的博客
04-06 1687
Vue3.0基本使用步骤、基础指令与过滤器
vue ---- filters过滤器中不能使用this问题
Allen-Ye博客
07-20 1276
vue ---- filters过滤器中不能使用this问题
vue处理：过滤器filters中不能引用this
Lisa_Xiaotouzi的博客
11-15 650
一般有错误，会导致页面不展示对应数据 处理方法： 1.声明对象 2.创建页面是赋值 3.引用时，直接像平时使用this一样就可以了
纯CSS 移动端，根据宽度获取高度
qq_19484091的博客
05-28 602
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 1356
vue项目中filters中的过滤方法使用this指向失效 vue项目中经常会用到表格数据展示 有些数据在数据库存储是使用数字存储， 在页面展示需要用文字表达 要把这个数字转一下 可以使用vue里的过滤方法 但是在过滤方法中使用this是undefined！！！ 下面是比较实用简单的解决方案 解决方法1 定义全局变量在生命周期beforeCreate把this赋值过去， 然后在过滤方法里使用这个变量代替this 比较麻烦 解决方法2 在data里定义一个变量that赋值this，在方法参数里传进去 示例 t
Vue的过滤器
m0_73094363的博客
09-25 431
原文链接：https://blog.csdn.net/m0_73094363/article/details/127007914。{{要过滤的文本 | 过滤器的名称（第二个参数、第三个参数.....）}}6.过滤器可以串联使用,并且上一个过滤器的返回值是下一个过滤器的参数。• Vue.filter(过滤器的id，()=>{})• {{要格式化的文本 | 过滤器的名称}}3. 过滤器接受参数，接受的第一个参数就是管道符前面的文本。分为 全局的过滤器和局部的过滤器。
Vue.js中的filter：过滤器详解以及应用（对当前时间进行格式化处理）
锦鲤姑娘的博客
03-16 1450
过滤器的详细说明以及应用举例——时间格式化
10——Filter过滤器
carrychenjie的博客
01-07 318
JSTL中的Core标签库： <c:forEach>标签： 在JSP页面中，经常需要对集合对象进行循环迭代操作，为此，Core标签库提供了一个 <c:forEach>标签，该标签专门用于迭代集合对象中的元素，如Set、List、Map、数组等，并且能重复执行标签体中的内容，它有两种语法格式，具体如下。 迭代包含多个对象的集合： <c:forEach [var="varName"] items="collection" [varStatus="varStatusName
Vue——学习笔记整理（继续整理中）
Thaley的博客
01-19 1327
整合了一下黑马vue入门以及尚硅谷Vue2&Vue3全家桶的学习笔记
vue 过滤器 filters 中取不到 this 问题解决
工作中遇到问题记录
11-04 1887
vue 过滤器 filters 中取不到 this 问题解决：定义一个that通过传参的办法取
js过滤器filter常见问题：this无法使用
zycome的博客
11-30 481
在vue开发环境中，使用filter函数时，方法体中的this指向数据无法使用。
vue如何在filter中使用this
weixin_43078608的博客
09-30 5774
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 1648
在Vue2里面一般处理文本比如时间格式化，文本替换等操作时，很容易想到使用filter，但是这有个问题，filter里面是没有this的，如果想使用到Vue实例只能换成computed或者method，比如下面这个例子： <template> <view> <view v-for="(item,index) in list" :key="index"> <!-- 对应下面错误方法一 --> <Item :content="item.t
filters过滤器中使用this的解决方案
泥鸽鸽的博客
11-18 5150
vue 中filters过滤器不能使用this的解决方案前言：filters作为Vue中的过滤器 我们在实际开发中会经常使用到 比如在模板上格式化我们想要的日期 但是使用这个属性也会遇到一些问题 比如我们最常用的时间格式化工具moment.js 当我们把它挂载到全局的时候 会使用：方案一： 不使用fiiters这是最直接的 不使用自然就不会又问题 可以直接在模板的差值表达式中写过滤的代码 如下：方案二：使用that代替this这种方式早就为人所用 但是问题出在 不知道在哪了定义that 前言： filte
随手记：vue2 filters this指向undefined
最新发布
weixin_63515766的博客
04-24 566
vue2 filters this指向undefined
vue过滤器filters获取不到this对象的解决办法
前端打工人的博客
11-30 8135
问题：想在过滤器filters中使用this，可能需要data或者props的一个值作为过滤的条件，如果直接使用this是会报错的，因为this为undefined，那如何解决呢？下面列举几个解决办法 一、使用computed <template> {{ '1558490001000' | formatDate }} </template> <script> export default { ... filters: { formatDat
vue的filters筛选器获取this使用
番茄脸红了~
06-29 2613
vue的filters筛选器；获取this使用；
filters中的this问题，及在computed中调用函数
张大晴的博客
04-19 807
过滤器内是没有this引用的，过滤器内的this是undefined，所以不要在过滤器内尝试使用this引用组件实例的变量或者方法。 尤大大的对这个过滤器filters的说明我才发现：vue中的过滤器更偏向于对文本数据的转化，而不能依赖this上下文，如果需要使用到上下文this我们应该使用computed计算属性的或者一个method方法。 <template> <u...
Vue.js过滤器详解：时间格式化应用
"Vue.js中的过滤器主要用于文本格式化，可以在双花括号插值和v-bind表达式中使用。过滤器通过管道符号指示，并且可以串联使用。全局过滤器则是在创建Vue实例前定义，适用于整个应用。" 在Vue.js中，过滤器是一个...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值