关于Vue中过滤器的必懂小知识

2024-12-24 01:26:40

前言

大家好，今天来分享下Vue中的过滤器小知识

什么是过滤器

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。

如何使用过滤器

全局过滤器

本案例是过滤价格中的￥和元
示例￥1999.00元
定义一个capitalize方法，传入value值
如果value为空返回空字符串
否则就叠加字符串"￥" "元" ，这里的toFixed(2)四舍五入为指定小数位数

使用方法

//main.js
Vue.filter("capitalize", function (value) {
  if (!value) return "";
  return "￥" + value.toFixed(2) + "元";
});

在双花括号中使用

<!-- home.vue -->
      <h1>Vue过滤器</h1>
      <p>{{ price | capitalize }}</p>
      {{ 20.6664376486 | capitalize }}

在 v-bind 中使用

      <h1>Vue过滤器</h1>
      <p :id="122 | capitalize"></p>

局部过滤器

这里注意下当全局过滤器和局部过滤器重名时，会采用局部过滤器。

局部过滤器可以在一个组件的选项中定义本地的过滤器：

export default {
  name: 'index',
  data() {
    return {
      price: 1999
    }
  },
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      return '￥' + value.toFixed(2) + '元'
    }
  }
}

过滤器可以串联

在这个例子中，filterA 被定义为接收单个参数的过滤器函数，表达式 message 的值将作为参数传入到函数中。然后继续调用同样被定义为接收单个参数的过滤器函数 filterB，将 filterA 的结果传递到 filterB 中。

{{ message | filterA | filterB }}

注意：

1、当有局部和全局两个名称相同的过滤器时候，会以就近原则进行调用，即：局部过滤器优先于全局过滤器被调用！

2、一个表达式可以使用多个过滤器。过滤器之间需要用管道符“|”隔开。其执行顺序从左往右

总结

到此这篇关于Vue中过滤器必懂小知识的文章就介绍到这了,更多相关Vue过滤器小知识内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

Vue.js -- 过滤器使用总结

过滤器是一个通过输入数据,能够及时对数据进行处理并返回一个数据结果的简单函数.Vue有很多很便利的过滤器,过滤器通常会使用管道标志 " | ", 比如: {{ msg | capitalize }} // 'abc' => 'ABC' uppercase过滤器 : 将输入的字符串转换成大写字母的过滤器. VueJs允许你链式调用过滤器,简单的来说,就是一个过滤器的输出成为下一个过滤器的输入,然后再次过滤.接下来,我们可以想象一个比较简单的例子,使用了Vue的 filterBy +
Vue.js学习之过滤器详解

前言在这个教程中,我们将会通过几个例子,了解和学习VueJs的过滤器.阅读这这篇文中的前提是你对Vue已经有了基本的语法基础. Vue.Js中的过滤器基础过滤器是一个通过输入数据,能够及时对数据进行处理并返回一个数据结果的简单函数.Vue有很多很便利的过滤器,可以参考官方文档, http://cn.vuejs.org/api/#过滤器 ,过滤器通常会使用管道标志 " | ", 比如: {{ msg | capitalize }} // 'abc' => 'ABC' upper
Vue实现自带的过滤器实例

一过滤器写法 {{ message | Filter}} 二 Vue自带的过滤器:capitalize 功能:首字母大写 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue自带的过滤器</title> <meta name="viewport" content="width=device-width,i
Vue filters过滤器的使用方法

本文实例为大家分享了Vue filters过滤器使用,供大家参考,具体内容如下实例先来看看一段代码理解下 html <div id="app"> {{message | filters2| filters3(true,priceCount)}} </div> js var app = new Vue({ el: "#app", data: { message: 199, priceCount:.8 }, filters:{ filters
vue中过滤器filter的讲解

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con
Vue 过滤器filters及基本用法

1.示例代码采用vue单文件组件,使用moment插件格式化日期 <template> <div> <h1>{{date | dateFormat}}</h1> </div> </template> <script> import moment from 'moment'; import 'moment/locale/zh-cn'; moment.locale('zh-cn'); export default { dat
Vue过滤器的用法和自定义过滤器使用

1.过滤器的用法,用 '|' 分割表达式和过滤器. 例如:{{ msg | filter}} {{msg | filter(a)}} a就标识filter的一个参数. 用两个过滤器:{{msg | myfilter | myfilternumber }} 2.自定义的过滤器过滤器的结构为:Vue.filter("id",function(value,a){}); value是过滤器的一个参数,也是默认的原始值.a是自定义的一个参数. 自定义过滤器的例子: <!DO
Vue.js每天必学之过滤器与自定义过滤器

基础类似于自定义指令,可以用全局方法 Vue.filter() 注册一个自定义过滤器,它接收两个参数:过滤器 ID 和过滤器函数.过滤器函数以值为参数,返回转换后的值: Vue.filter('reverse', function (value) { return value.split('').reverse().join('') })  <span v-text="message | reverse">&
关于Vue中过滤器的必懂小知识

目录前言什么是过滤器如何使用过滤器全局过滤器局部过滤器过滤器可以串联总结前言大家好,今天来分享下Vue中的过滤器小知识什么是过滤器 Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化.过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持). 如何使用过滤器全局过滤器本案例是过滤价格中的￥和元示例￥1999.00元定义一个capitalize方法,传入value值如果value为空返回空字符串否则就叠加字符串"
vue 中url 链接左边的小图标更改问题

修改url左边的小图标(标题前的小图标).例如: favicon.ico一般用于作为缩略的网站标志,它显示位于浏览器的地址栏或者在标签上,用于显示网站的logo. 1.首先得到或生成需要的ico文件.ps ico文件生成地址 http://bitbug.net/ 2.将生成的文件置于static文件夹下(可自行存放) 3.在index.html中,title下写入: <link rel="icon" href="./static/刚刚生成.ico的地址" re
vue中过滤器的用法

一.过滤器过滤器是vue中的一个特性,作用是用于对文本进行格式化的作用. 注意:在vue 1.0中有内置的过滤器,在2.0中去掉了内置过滤器,只有自定义过滤器二.使用位置过滤器只能应用在两个地方:双花括号插值和v-bind表达式(后者从 2.1.0+ 开始支持).例如:  <div>{{3 | addZero}}</div> <!--在v-bind中使用格式:v-bind:id="
关于vue src路径动态拼接的小知识

目录 vue src路径动态拼接第一种:本地添加第二种:从接口中获取图片的路径如何通过变量动态拼接url vue src路径动态拼接我是新手今天写vue 的时候让这个src 给我弄的懵懵本来打算弄个轮播图加路径但是怎么也不显示第一种:本地添加如果需要很多图片一直加div就很烦所有我就把所有图片写在数组里面注意引入图片路径一定要加 require 一定要加 require 一定要加 require 然后我用了mint-ui里面的轮播组件使用v-for 把图片路径循环出
Go中map数据类型3点小知识

1.map数据类型初始化两种方式:map[string]string{}或make(map[string]string) 2.未初始化的map是nil,它与一个空map基本等价,只是nil的map不允许往里面添加值.(A nil map is equivalent to an empty map except that no elements may be added) 因此,map是nil时,取值是不会报错的(取不到而已),但增加值会报错. 其实,还有一个区别,delete一个nil map
Javascript中this关键字的一些小知识

Javascript应该是现在最流行的跨平台语言之一,一直在玩前端的一些有意思的东西,发现竟然没有掌握好这门语言.有点舍本逐末,于是想趁着现在这有空的时候好好补充一点遗漏的东西. this的隐性绑定一开始这是我很迷惑的东西,刚开始看到的时候,不理解.而后,在相似的情况下,又能用类似的方法解决同样的问题.便试着理清这其中的知识,方便于查找. 这是一个Javascript语言上设计的错误,但是似乎这个错误是不可避免的,函数是对象,数组是对象等等.引用<Javascript: The Good Pa
Vue中的过滤器(filter)详解

目录过滤器使用位置全局过滤器.局部过滤器全局过滤器: 局部过滤器: 过滤器中传入多个参数: 多个过滤器串联: 官方文档:https://cn.vuejs.org/v2/guide/filters.html 在官方文档中,是这样说明的:可被用于一些常见的文本格式化,vue中过滤器的作用可被用于一些常见的文本格式化.(也就是修饰文本,但是文本内容不会改变) 个人觉得称它为加工车间会更加贴切一些,过滤器可以用来筛选出符合条件的,丢弃不符合条件的:加工车间既可以筛选,又可以对筛选出来的进行加工.
在vue中使用image-webpack-loader实例

首先打开 webpack.base.confi.js 提示:在这里url-loader 和 image-webpack-loader 不能一起使用,否则会导致图片出不来接着找到 module: { rules: [ {}... ] } 在这里写入,一定要先写 'file-loader' 才能使用 'image-webpack-loader' 有各种配置,可以调整你要压缩后图片的质量提示:如果使用了 webp 会大大减少体积,但是ios并不支持这个格式,会导致在ios上看不见图片 { test
总结一些PHP中好用但又容易忽略的小知识

本文主要给大家总结了PHP中一些好用的小知识,分享出来供大家参考学习,下面来看看详细的介绍: 1.PHP函数之判断函数是否存在当我们创建了自定义函数,并且了解了可变函数的用法,为了确保程序调用的函数是存在的,经常会先使用function_exists判断一下函数是否存在.同样的method_exists可以用来检测类的方法是否存在. function func() { } if (function_exists('func')){ echo 'exists'; } 类是否定义可以使用class