vue的filter过滤器中如何获取data中的数据

最新推荐文章于 2024-05-21 14:15:14 发布
最新推荐文章于 2024-05-21 14:15:14 发布
阅读量472 收藏
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yy_demo/article/details/133703336
版权

   我明明在data中定义了数据，但是在filter中不管是否加了this都获取不到数据，这是为什么呢？

  因为filters中的this指的并非vue的实例。

那在filters中如何拿到data中定义的数据呢？

  可以先定义一个全局变量 例如that

  在create中接收一下this的指向

  然后直接通过that获取到data中的数据即可

yy_demo
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
如何在filters中使用data中数据？
刘杨造梦的博客
10-26 789
在vue2.x中使用filters功能，如果想在filter中使用this调用data中的数据，会报错，因为this不是指向。目前选择的是：{{ type | convertText }}{label: '苹果', value: 1},{label: '香蕉', value: 2},{label: '苹果', value: 1},{label: '香蕉', value: 2},{label: '橘子', value: 3}{label: '橘子', value: 3}// self指向vue组件实例。
Vue的全局过滤器和私有过滤器
01-08
Vue允许自定义过滤器 可被用作一些常见的文本格式化 过滤器可以用在两个地方：mustache插值表达式 和 v-bind表达式 过滤器应被添加在JavaScript表达式的尾部 由“管道”符指示(管道符就是一个竖杠：|) 一、全局过滤器 全局过滤器调用时的基本格式： 通过管道符[|]来进行过滤 例如{{name | nameOpe}} 定义过滤器的语法：Vue.filter(过滤器名称,处理函数) 处理函数的第一个参数已被固定了 是data 即管道符前面传递的数据 若要添加其它入参 只能添加在data的后面了 Vue.filter(,function(data) { retu
vue 中 filters 如何获取data里的数据
qq_32615575的博客
09-30 5425
注意：vue 中的filters过滤器this指向并不是vue 中的this，而是undefined，要指向this获取vue的data数据,可以如下操作 1，声明一个全局变量 let that; 2，在生命周期 beforeCreate里面改变this指向 beforeCreate: function () { that = this; }, filters: { ...
vue2 filters中使用data中数据
to_the_Future的博客
03-02 680
vue filters中 this指向的不是vue实例，但想要获取vue实例中data中的数据，可以采用下面方法。在 beforeCreate的钩子函数中将vue实例赋值给全局变量_self，然后filters中即可通过_self获取data中数据
vue项目中filter过滤器中如何获取data中的数据
weixin_46949106的博客
03-07 516
最后直接在过滤器中使用that调用data中的数据即可。然后在生命周期钩子函数中改变this的指向。首先声明一个全局变量that。
vue filters中使用data中的数据
-
03-10 508
写代码时发现在filters中直接通过this.变量名去使用data中的数据时拿不到值的，查阅资料发现this的问题，解决方法是： 一、在vue实例前，声明一个变量,我这里是self： 如果是脚手架项目就在export default之上声明该变量 二、在beforeCreate()钩子函数中将vue中的this赋值给该变量 三、使用时，通过self.变量名就可以使用啦 ...
Vue filters获取data中的数据
~
09-06 1133
场景：通过filters中的方法去修改data中的数据时出现报错。 补充：filters中的this指的并非vue的实例，在vue的filters中使用this引用data中的数据是无法获取的。 那么问题来了：如何在filtres中使用data中的方法？ 方法一：可以申明全局变量，改变this方法。 1.在对应的组件中申明全局变量 2.在beforeCreated申明周期中修改this的指向，并在filters中使用。就可以获取data中申明变量 方法二：可以直接给filter传递参..
Vue 过滤器filters及基本用法
11-27
采用vue单文件组件，使用moment插件格式化日期 <h1>{{date | dateFormat}} [removed] import moment from 'moment'; import 'moment/locale/zh-cn'; moment.locale('zh-cn'); export default { data() ...
vue.js 过滤器使用及原理分享讨论
01-20
Vue.js 过滤器使用及原理分享讨论 一. 过滤器使用场景/语法/分类 使用场景 在做页面的渲染时，过滤器主要帮助我们在不更改原数据的前提下，格式化文本。 例子： // 页面在做数据渲染时，后台返回的数据格式为枚举...
详解vue过滤器在v2.0版本用法
12-28
1.x写法 <body> ... [removed] new Vue({ el:'#app', ...但是2.0中已经废弃了过滤器，需要我们自定义 {{message|uppercase}} //过滤器 Vue.filter('uppercase', function(value) { if (!value) {
详解Vue2.0里过滤器容易踩到的坑
11-27
function里第一个参数value默认为使用这个过滤器的data对象内的值，在本例中是msg的值’you are mine’。 坑1：第一个参数必须为自身的值，后面可以加任意多的参数。数序颠倒就会出错。 下面来一个最常见的小例子...
VUE中filters获取data方法中的数据，解决办法
qq_43953273的博客
03-03 2159
亲测可用 https://blog.csdn.net/ee_11eeeeee/article/details/102961376
vue 通过全局过滤器（filters）枚举转换后端传回来数据
路虽远行则将至，事虽难做则必成。
02-27 817
在实际开发中，会发现有些键名是传回数字的显示，表格的数据，我们就需要把它转换成用户看的懂的数据。全局过滤器除了可以使用枚举，还可以给时间戳转换，form自定义表单规则，相当于一个工具包。枚举除了给表格替换数据，还可以给导出替换数据，打印替换数据，给form表单提供下拉款数据。
vue filters中使用data中数据
qq_15859173的博客
12-25 837
vue 的filters中 this指向的并不是vue实例，但想要获取vue实例中data中的数据，可以在 beforeCreate中将vue实例赋值给定义的全局变量app，然后在filters中通过app代替this来获取data中的数据。 <script> // 全局变量app let app = null; export default { data: { return: { skin: "敏感肌", }, }, beforeCreate() {
vue过滤器取data中的值
一步一个脚印_binding
11-23 1076
取值的最终结果 data中定义变量 that全局变量，可以调用此页面的所有方法，和data变量，用此种方式可以在过滤器中使用data中的变量 create中初始化 最后即可正常使用
vue中filter
ssjjrr的博客
10-07 504
vue filter
openlayers绘制经纬网格，有添加或者移除功能
最新发布
qq_52959651的博客
05-21 269
我的项目是vue写的，当点击多选框显示隐藏经纬网格，下面直接写代码。项目需要在地图中添加经纬网格，然后看了一下官网有相关的介绍。这是删除图层相关的网站。这是绘制经纬网格方法。
vue使用filter过滤器处理数据
07-27
Vue中的过滤器（Filter）是用来处理模板中的数据的一种方式。它可以在模板中对数据进行格式化、排序、过滤等操作，使数据在渲染之前经过一定的处理。 在Vue中，你可以通过全局过滤器或局部过滤器来使用过滤器。 全局过滤器可以在整个应用中使用，而局部过滤器只能在特定的组件中使用。 下面是一个使用全局过滤器的示例： ``` // 注册全局过滤器 Vue.filter('capitalize', function(value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) }) // 在模板中使用过滤器 <div> {{ message | capitalize }} </div> ``` 在上面的示例中，我们注册了一个名为"capitalize"的全局过滤器，它会将传入的字符串首字母大写。然后在模板中使用了该过滤器来处理message变量。 除了全局过滤器外，你还可以在组件中定义局部过滤器。下面是一个使用局部过滤器的示例： ``` Vue.component('my-component', { // 定义局部过滤器 filters: { lowercase: function(value) { if (!value) return '' return value.toString().toLowerCase() } }, template: ` <div> {{ message | lowercase }} </div> `, data() { return { message: 'Hello World' } } }) ``` 在上面的示例中，我们在组件的`filters`选项中定义了一个名为"lowercase"的局部过滤器，并在模板中使用了该过滤器来处理message变量。 总结起来，Vue的过滤器是一种用于对模板中的数据进行处理和格式化的机制。你可以使用全局过滤器或局部过滤器来定义和使用过滤器。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值