Vue中,过滤器的使用方法!

Vue.js允许自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:双花括号插值和v-bind表达式。过滤器应该被添加在JavaScript表达式的尾部,由“管道”符号指示;(借官方的来介绍下,接下来直奔主题)

1、定义全局过滤器!任何组件都能用。

main.js中定义全局过滤器

//  定义长度为10的过滤器
Vue.filter(‘length10‘,(e) =>{
  return e.slice(0,10) + ‘...‘
})
//  定义转大小写的过滤器
Vue.filter(‘toUpperCase‘,(e)=>{
 return  e.toUpperCase()
})

app.vue使用

// template
  <div>{{str}}</div>
  <div>{{str | length10}}</div>
  <div>{{str1 | length10 | toUpperCase}}</div>

//  script
data(){
    return {
      str:‘公众号“前端伪大叔”,欢迎大家前来关注!‘,
      str1:‘qianduanweidashu‘
    }
  }

总结:过滤器使用方法是‘|’直接使用,可以使用多个过滤器

2、过滤器传参,了解一下 /笑哭

main.js

Vue.filter(‘Biography‘,(e,str1) =>{
     return e.slice(0,str1) + ‘...‘
}

App.vue

//  template
<div>{{str | Biography(9)}}</div>
//  script
 data(){
    return {
      str:‘公众号“前端伪大叔”,欢迎大家前来关注!‘,
    }
  }

3、组件内过滤器

组件内过滤器,需要定义在filtets这个对象中,对象中定义的都是方法;

//  template
  <div>{{str | length(9) }}</div>
  <div>{{str1 | length(9) | toUpperCase}}</div>

//  script
 data() {
    return {
      str: "公众号“前端伪大叔”,欢迎大家前来关注!",
      str1:‘qianduanweidashu‘
    };
  },
//  这里filters是这个对象
  filters: {
//  自行输入长度
    length(e, num) {
      return e.slice(0, num) + "...";
    },
//  转为大写
    toUpperCase(e) {
      return e.toUpperCase();
    }
  }

总结:filters是局部过滤器,只能在组件内使用;和全局过滤器一样可以传参,使用同时多个过滤器;

如果大家喜欢的话,欢迎关注“前端伪大叔”我将为您不间断的分享前端学习知识!

原文地址:https://www.cnblogs.com/webfy/p/11564467.html

时间: 2024-10-09 16:37:30

Vue中,过滤器的使用方法!的相关文章

vue中计算属性,方法,侦听器

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue中计算属性,方法,侦听器</title> <script src="./vue.js"></script> </head> <body> <div id="app&qu

vue中 localStorage的使用方法(详解)

vue中实现本地储存的方法:localStorage,在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k),localStorage中一般浏览器支持的是5M大小,这个在不同的浏览器中localStorage会有所不同. (1).储存数据 localStorage.setItem('accessToken', 'Bearer ' + response.data.res

vue中引入awesomeswiper的方法以及编写轮播组件

1.先安装less-loader npm install less less-loader --save 2.再安装css-loader npm install css-loader --save 3.安装上面两个之后.再安装vue-awesome-swiper(必须在前两个安装过之后安装) npm install vue-awesome-swiper --save 4.安装完之后在package.json文件中查看一下,看是否安装上,如果安装成功,里面会显示对应的版本号 "less"

解决vue中无法取得methods方法中的return值

如果在vue的methods中去return出来一个值, 然后发现调用这个方法的时候, 并不能获取到, 得到的是undefined... 解决方法是使用callback回调函数. 举个栗子:   这个样子获取到的结果是undefined 正确写法: 原文地址:https://www.cnblogs.com/betty-niu/p/12027585.html

vue中计算属性vs方法的区别

一 什么是计算属性? 计算属性(computed),也是一个属性,也是用来存储数据用的,但是和data属性相比还是有区别 1 数据是可以进行逻辑处理相关的操作 2 可以对计算属性中的数据进行监视 例如: 调用的方式都是一样的 二 计算属性和方法的区别? 1 计算属性是基于它所依赖的数据进行更新,在有在相关依赖的数据发生变化了才会进行更新,而普通的方法每次都会执行 2 计算属性是有缓存的,只要它所依赖的数据没有发生改变,后面的每一次访问计算属性中的值,都是之前缓存的结果,不会重复执行. 例如: h

swiper在vue中正确的使用方法

1.安装swiper,执行npm install vue-awesome-swiper --save命令 2.在main.js中添加下面三行 import 'swiper/dist/css/swiper.css' import VueAwesomeSwiper from 'vue-awesome-swiper' Vue.use(VueAwesomeSwiper) 3.在html部分添加 <swiper :options="swiperOption"> <swiper-

关于vue中ref的使用方法

之前在项目中会通过ref在父子组件传递一些数据,但是具体ref的其他用法并没有深究,所以来了解一下ref的具体使用方法 first: <div ref="hello"> <!-- 绑定了data里面的值并渲染到页面--> <h1 v-model="msg">{{msg}}</h1> </div>//在方法或者生命周期的函数中获取数据 console.log(this.$refs.hello.innerTex

在Vue中关闭Eslint 的方法

初学者建议先不用eslint,熟悉一点了再用,不然代码全都过不了 关闭方法 然后打开webpack.base.conf.js找到 然后注释掉就可以了 原文地址:https://www.cnblogs.com/pangbo1213/p/8566737.html

vue中过滤器filters的使用

组件内写法 filters:{ filter:function(data,arg1,arg2){ return .... } } 全局写法 filters('filter',function(data,arg1,arg2){ retrun .... }) 1.在html中使用 {{ msg | filter('arg1','arg2') }} // msg对应函数中的第一个参数data,arg1为第二个参数,类推 2.methods中使用,并传参 methods:{ fn(){ let filt

vue中自定义指令

在vue中自定义标签,首先要调用vue中一个directive的方法,具体方法:Vue.direction('指令名称',function(){ }); 例如我们要写一个关于颜色的指令,叫v-colorred: 1 Vue.directive('colorred',function(){ 2 3 this.el.style.color='red'; 4 }); 在html中,我直接用v-colorred指令就可以了,例如: 1 <p v-colorred>1234567890</p>