vue 中的过滤器无法取到data中的变量

最新推荐文章于 2022-09-26 14:36:13 发布
最新推荐文章于 2022-09-26 14:36:13 发布
阅读量2.4k 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44092085/article/details/108347928
版权

法一
在filter中加入需要的变量作为参数传入到过滤器中
如图
在这里插入图片描述
在这里插入图片描述
可以在filter中进行操作

法二
直接在脚本中定义一个全局变量,然后在过滤器中用这个变量去取数据
如图
全局定义
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
第二种方法刚刚发现一个foreach的错，就是foreach中不能返回数据，返回的item.label永远都不能显示在界面上，所以可以改用for循环。

希望下次能记住
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue中 给过滤器中 传递参数 (过滤器中无法获取data中的属性值)
业余前端的职业经历
09-01 1928
我们在项目中使用 过滤器 更多的是 格式化 日期 性别啥 但是 也会碰见一些特殊的情况 需要传参的 又得时候会和 data中的其他的数据产生关联 我发现在过滤器中 使用 this.属性值的情况 竟然 出不来 很奇怪 这个时候 只能通过传参的方式进行传入到 过滤器中了 <p>{{sex | gender(count) }}</p> // 过滤器中 第一个 参数 还是 前面的 sex 第二个才是我们要传进来的那个参数 count filters:{ gender(val
Filter过滤器,取不到值的问题!
liu163710的专栏
10-21 1901
SetCharacterEncodingcom.downloader.filters.SetCharacterEncodingFilterencodingutf-8SetCharacterEncoding/* SetUserPostcom.downloader.filters.SetUserPostFilter loginpage /admin/login.htm SetUserPost/admi
Vue之filters传参问题
HeyinB的博客
09-12 4813
在使用filters进行过滤时，发现filters的this指向是undifined 这时候就要用到filters的传参了 在过滤器中通过（）形式进行传参 <div class="title"> {{item.title|titleFilter(isMobile)}} </div> 然后再filters中进行定义 在过滤器中第一个参数为上面管道符左边的...
Vue 过滤器filter调用data、methods中的东西报错
这就是快乐嘛
04-16 1868
今天学习了filter，我将过滤的过滤方法放到methods中发现怎么调用都说没有这个function 然后我把log了一下这个this 发现这个this指向的竟然是window 于是网上找到了如下的解决方法： 定义一个全局变量: let that; 在beforeCreate生命周期将this赋值给that，通过that获得 var vm = new Vue({ el: '#app',...
Nginx系列之过滤模块以及变量使用
qiaotl的博客
09-26 2493
通过规则说明和实际例子演示的方式，讲解Nginx中过滤模块以及与变量使用相关的模块的使用
vue中的过滤器实例代码详解
10-16
在Vue.js中，过滤器是Vue的实例功能之一，旨在对文本进行格式化显示。它们可以用于模板插值和v-bind表达式中，提供了一种方便的方法来进行字符串格式化、货币转换、日期格式化等操作。过滤器分为全局过滤器和本地...
vue通过过滤器实现数据格式化
11-20
本篇文章将详细介绍如何在Vue中使用过滤器进行数据格式化。 在Vue中，过滤器的使用灵感来源于Linux shell命令的管道（pipe）概念。管道允许我们将一个命令的输出作为另一个命令的输入。同样，Vue的过滤器可以串联...
Vue 过滤器filters及基本用法
08-28
在 Vue 过滤器中，`this` 引用是 undefined，这意味着我们不能在过滤器中使用 `this` 引用组件实例的变量或方法。 总结 Vue 过滤器是一种功能强大的工具，能够对数据进行格式化和处理。我们可以使用 Vue 过滤器来...
详解vue过滤器在v2.0版本用法
08-30
在Vue 2.0版本中，尽管过滤器的使用方式有所改变，但它们仍然是一个强大的工具，用于在数据绑定中执行数据转换。这篇文章将深入探讨Vue 2.0中的过滤器及其用法。 在Vue 1.x版本中，我们可以直接在模板中使用过滤器...
vue中过滤器filters获取不到this的问题以及解决方法
qq_40685439的博客
06-28 6098
在vue中，如果要过滤的数据是依赖this上下文的话，是会报错的，因为this的指向是undefined，而不是vue实例； 打印结果： 原因： 这句话的大概意思是，vue中的过滤器更偏向于对文本数据的转化，而不能依赖this上下文，如果需要使用到上下文this我们应该使用computed计算属性的或者一个method方法。 解决办法1：在data中定义一个that=this，在需要过滤的过滤器中传入that参数，然后在过滤器中使用 结果：可以拿到firstTime的值 解决办法2：改用compu
Vue过滤器
weixin_45895314的博客
09-20 268
过滤器的定义 Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。 过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。 过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示 {{text | filter1| fiter2(123) }} 过滤器的分类 全局过滤器 定义全局过滤器 一定要写在实例之前 如果过滤器没有返回 值 则默认返回控制字符串 （如果过滤器filter1或者fiter2没有返回值时 则还 是tex
vue 中filter（过滤器）的使用
李三丧的博客
08-20 1574
今天修改bug过程中，看到前同事的项目代码中，发现定义了一个 fliters，很奇怪，这是啥？过滤器？网上查了一下确实叫vue自定义过滤器，初始我以为和js的Array中filter()过滤器一样，过滤符合标准的变量之类的，结果看过vue的fliter文档之后发现似乎不仅仅是这样。 最开始，我觉得，这算啥过滤器啊，这不应该叫数据处理器吗？为啥这么说，下面就来看看它的用法。...
Vue filters获取data中的数据
Canon80的博客
07-04 2868
filters中获取data中的数据
vue2.x filters中使用data中数据
I_recluse的博客
12-01 2327
在vue2.x中使用filters功能，如果想在filter中使用this调用data中的数据，会报错，因为this不是指向vue组件实例。 如果想用data中的数据，一般有两种方式： 1.在使用filter时传入data中数据，如： <template> <div> 目前选择的是：{{ type | convertText(list) }} </div> </template> <script&...
vue过滤器filters获取不到this对象的解决办法
weixin_43123984的博客
02-11 2278
解决方案 在data中定义一个属性that,把this存储到that中 在调用filters中的方法sum的时候将that传进去即可 下面举个例子用filters计算data中 a+b 的值 注意：filters中的sum方法的第一个参数是 | 左边那个a，第二个参数才是括号写的that <template> <div>{{a|sum(that)}}</div> </template> <script> export default {
vue获取不到后端数据解决办法
qq_41357867的博客
04-23 4153
vue中获取不到后端值的情况
vue 混入 相同的对象，钩子的合并规则
月光恋九霄的博客
02-24 813
当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”。 比如，数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。 const myMixin = { data() { return { message: 'hello', foo: 'abc' } } } const app = Vue.createApp({ mixins: [myMixin], data() { return { message:
vue 中 filters 如何获取data里的数据
六国破灭，非兵不利 ，战不善，弊在赂秦。赂秦而力亏，破灭之道也。或曰：六国互丧，率赂秦耶？曰：不赂者以赂者丧，盖失强援，不能独完。故曰：弊在赂秦也。 秦以攻取之外，小则获邑，大则得城。较秦之所得，与战胜而得者，其实百倍；诸侯之所亡，与战败而亡者，其实亦百
05-13 9074
1，声明一个全局变量 let that; 2，在生命周期beforeCreate里面改变this指向 beforeCreate: function () { that = this; }, filters: { ifsex(val) { return IFSEX[val] }, ...
vue中过滤器有什么作用及详解
最新发布
05-16
Vue中的过滤器(Filter)是一种可以在模板中对数据进行格式化输出的方法，可以用于格式化文本、日期、金额等数据，从而使数据更符合展示需求。过滤器在模板中使用管道符“|”进行调用，格式为“{{ data | filter }}”。 Vue的过滤器主要有两种：全局过滤器和局部过滤器。 全局过滤器是定义在Vue实例化之前的。可以在Vue的实例化之前通过Vue.filter()方法进行定义。全局过滤器可以在任何Vue实例中使用。 局部过滤器是定义在Vue实例化之后的，可以通过filters选项进行定义。局部过滤器只能在当前的Vue实例中使用。 Vue的过滤器可以接收参数，参数通过“|”符号后面的冒号“:”进行传递。例如：{{ data | filter(param1, param2) }}。 过滤器的实现方式有两种：函数式和对象式。函数式过滤器是一个普通的函数，接收一个参数并返回处理后的结果。对象式过滤器是一个包含“read”和“write”两个函数的对象，用于实现双向数据绑定。 以下是一个使用全局过滤器实现金额格式化的示例代码： ```html <template> <div> <p>原始金额：{{ money }}</p> <p>格式化后金额：{{ money | formatMoney }}</p> </div> </template> <script> Vue.filter('formatMoney', function(value) { return "¥" + (value / 100).toFixed(2); }); export default { data() { return { money: 10000 } } } </script> ``` 以上代码中，全局过滤器“formatMoney”用于将金额转化为以“¥”为单位的字符串，保留两位小数。在模板中通过管道符“|”调用该过滤器，将“money”变量进行格式化输出。 总之，Vue的过滤器可以帮助我们快速方便地对数据进行格式化输出，从而更好地满足展示需求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值