Vue之filters传参问题

在使用filters进行过滤时，发现filters的this指向是undifined

这时候就要用到filters的传参了

在过滤器中通过（）形式进行传参

<div class="title">{{item.title|titleFilter(isMobile)}}
</div>

然后再filters中进行定义

在过滤器中第一个参数为上面管道符左边的item.title，第二个参数为管道符右边括号中传递的数值

在该括号中可以访问data里面的数值

filters:{titleFilter(title,isMobile){//这里第一个参数表示要过滤的数值，第二个参数表示上面括号中传递的值let len = title.length;if(len>10&&isMobile){return title.slice(0,16)+"..."}else{return title.slice(0,40)+"..."}}},

Vue之filters传参问题相关推荐

Vue过滤器的传参使用及案例
Vue过滤器的传参使用及案例过滤器用于一些常见的文本格式化过滤器的第二个参数为可选使用位置过滤器可以用在两个地方:双花括号插值{{ }}和 v-bind 表达式** 使用方法 {{ 变量 | ...
【Vue】路由传参方式
在使用params传递参数时,需要使用name来指定目标,否则会出现数据传输失败 vue的路由传参共有三种方式 1.query传参:不管使用path还是name来匹配路由都可以,然后通过query来传 ...
Vue动态路由传参和监听路由
Vue动态路由传参 query传参 params传参 //定义Detail路由 {path: '/detail/:id',name: 'Detail'component: () => impor ...
vue 事件调用传参_对vue下点击事件传参和不传参的区别详解
如下所示: {{btn_text1}} {{btn_text2}} var _vm = new Vue({ data : { btn_text1 : '点击1' , btn_text2 : '点击2' ...
vue 事件调用传参_vue如何在父组件指定点击事件后向子组件传递参数并调用子组件的事件？...
可以给父组件写一个ref属性,父组件可以通过ref拿到子组件中的数据和方法(即例子中子组件的say方法),这样在父组件中就可以触发子组件的事件了.而父组件向子组件传参可以通过prop属性(即例子中的f ...
Vue 中路由传参（动态路由匹配）
一.解释把数据从一个路由页面传递到另外一个页面的技术这里列举了 params 和 query 的传参方式二.案例案例展示手机列表页传参到手机详情页面(传递的是id) ① params ...
vue 事件调用传参_Vue 事件如何传递参数？
Vue 事件如何传递参数? 事件函数参数传递: 普通参数和事件对象传递格式如下: 调用函数传参点秋香 vue事件绑定-参数传递实例如下: vue事件绑定-参数传递 xinbiancheng.cn { ...
vue中路由传参方式之二（this.$router.push进行编程式路由跳转传参）
this.$router.push进行编程式路由跳转传参 router中路由配置组件home点击传参组件homeDetails接受参数 router中路由配置 params第一种传参路由配置 {p ...
Vue：路由传参的三种方式
文章目录前言方式一:params 传参(显示参数) 1.声明式 router-link 2.编程式 this.$router.push 方式二:params 传参(不显示参数) 1.声明式 rou ...
vue动态路由传参---query传参和params传参
当一个页面跳转到另一个页面时,组件结构相同,只是内容不同且地址栏后缀不同 ,这个地址栏的后缀就是参数,根据不同参数渲染不同的内容,这个跳转就叫路由传参. 当项目中组件间通过路由跳转,有时,我们需要传递 ...

Vue之filters传参问题

Vue之filters传参问题相关推荐

最新文章

热门文章