Vue全局过滤器filter、局部过滤器filters的使用

最新推荐文章于 2024-05-26 10:04:06 发布
最新推荐文章于 2024-05-26 10:04:06 发布
阅读量140 收藏 2
点赞数
分类专栏： Vue 文章标签： vue.js javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010234868/article/details/120079516
版权 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app"></div>

    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
      // 全局过滤器
      Vue.filter('myReverse', function (value, arg) {
        return arg + ' ' + value.split('').reverse().join('');
      });
      var App = {
        data() {
          return {
            price: 0,
            msg: 'hello'
          };
        },
        template: `
                <div>
                    <input type="number" v-model="price" />
                    <p>{{price | currency}}</p>
                    <p>{{msg | myReverse('Vue')}}</p>
                </div>
            `,
        filters: {
          // 声明局部过滤器  // 使用 {{数据 | 过滤器名字}}
          currency: function (value) {
            return '￥' + value;
          }
        }
      };
      new Vue({
        el: '#app',
        data: {},
        components: {
          App
        },
        template: `
                <App />
            `
      });
    </script>
  </body>
</html>

 

每一天，每一步
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue中过滤器的使用
weixin_46376652的博客
07-10 544
Vue.filter(name,callback) 或 new Vue({ filter:{...} }){{xxx | 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器名"使用管道符 | 进行分割，直接使用data中的数值，管道符后再接过滤器进行操作{{time | setTime}}：time是传入的时间参数，setTime是过滤器的名字，它会将time作为参数val传入到过滤器setTime(val)中，最后将return结果替换掉整个插值语法； 当调用的时候传入了参数，第一
Vue封装全局过滤器Filters的步骤
01-21
（PS：本文代码在vue-cli3构建的基础vue项目之上进行编写：vue ...　在 src目录 下新建 filters目录 用来专门存放全局过滤器，如果项目的过滤器过多，那么就要按类型分类。 　如果项目需要前台处理的数据不是太多，那
局部过滤器的使用filter
abcdefg182的博客
06-01 920
<div id="app"> <!-- msg是作为参数传给filterA函数， 而filterA函数的返回值作为参数传给filterB函数， 最终结果显示是由filterB返回的。 --> <div> {{ msg | filterA | filterB }} </div> <div> <!-- 带参过.
推荐使用：Vue Currency Filter - 轻量级货币过滤器
最新发布
gitblog_00042的博客
05-26 387
推荐使用：Vue Currency Filter - 轻量级货币过滤器 项目地址:https://gitcode.com/mazipan/vue-currency-filter 在进行金融或电商类网站开发时，准确、易读的货币显示至关重要。为此，我们向您推荐一个名为 Vue Currency Filter 的开源项目，它是一个基于 accounting.js 的轻量级 Vue 滤镜插件，能够帮助您轻...
vue中局部过滤器和全局过滤器的使用
铁锤妹妹的博客
04-09 1078
关于 vue 过滤器 在vue1.0的时候其实是内置了过滤器的，但是考虑到好多过滤器并不一定会被开发所调用，所以把原本内置的过滤器就给去掉了，但是过滤器还是比较普遍的，所以我们从vue2.0之后就需要自己定义过滤器 以上是vue官方对于过滤器的介绍，它通常被用在插值表达式或属性绑定上。 vue 过滤器分类 过滤器分为两种，一种是局部过滤器，一种全局过滤器。所有的过滤器都是函数，并且参数为要过滤的数据。 局部过滤器：只允许在当前组件中使用 全局过滤器：所有组件都可以使用 局部过滤器 //
vue基础之局部过滤器
qq_38101304的博客
01-12 280
概念: 在一个vue实例对象中才能生效，如果需要在整体剩下ode话，可以定义全局过滤器 作用: 过滤器的最大作用其实是对字符串的处理，例如格式化日期，过滤敏感词汇等等。 以格式化日期为例: <div id="app"> <p>{{name|date_format}}</p> </div> </body> <script> let vue=new Vue({ el:"#app", data:{
Vue过滤器使用(全局、局部)
qq_45593068的博客
08-09 503
Vue过滤器使用(全局、局部) 转载 ： 借鉴大佬文章 这里只写全局过滤器 定义无参全局过滤器 <div id="app"> <p>{{ msg | msgFormat}}</p> </div> <script> // 定义一个 Vue 全局的过滤器，名字叫做 msgFormat Vue.filter('msgFormat', function(msg) {
Vue 过滤器filters及基本用法
11-27
1. **全局过滤器**：在Vue实例创建时通过`Vue.filter()`方法注册，可以被所有组件共享。 ```javascript Vue.filter('myFilter', function (value) { // 返回处理后的值 }) ``` 2. **局部过滤器**：在组件的`filters...
过滤器vue.filters的使用方法实现
12-13
写项目的时候，有一些方法我们是需要全局使用的，比如数字的四色五入保留小数点啊、一些工具方法、字符的格式化啊等等。这些很多页面需要用的、使用频率极高的方法，我们一般会将其封装为全局的方法；我以前是这样做...
vue中过滤器filter的讲解
10-17
除了全局过滤器，Vue还支持局部过滤器，这些过滤器只在创建的Vue实例作用域内可用。局部过滤器的定义方式如下： ```javascript var vm = new Vue({ el: '#app', data: { // ... }, filters: { // 过滤器名称:...
vue-cli 3 全局过滤器的实例代码详解
12-12
使用 `Object.keys` 遍历 `filters` 对象，并将每个过滤器用 `Vue.filter` 注册为全局过滤器。 ```javascript import Vue from 'vue' import App from './App.vue' import * as filters from './assets/filters' ...
vue-currency-filter:on基于accounting.js的轻量级vue货币过滤器
05-23
:cherries: Vue货币过滤器 基于accounting.js的轻量级vue货币过滤器 演示版 下载 # NPM npm install vue-currency-filter # Yarn yarn add vue-currency-filter 样品用量 逐步使用vue-currency-filter ： 导入main.js import VueCurrencyFilter from 'vue-currency-filter' 使用插件 Vue . use ( VueCurrencyFilter ) 添加全局配置 Vue . use ( VueCurrencyFilter , { symbol : '$' , thousandsSeparator : '.' , fractionCount : 2 , fractionSeparator : ',' , symb
vue 过滤器 全局和局部的使用
lixiaoqidecsdn的博客
06-17 347
vue 过滤器 全局和局部的使用
filter 全局和局部过滤器
aiying8602的博客
08-21 268
1，局部过滤器 2，全局过滤器 使用方法相同，在花括号中使用过滤器名或者v-bind中使用 转载于:https://www.cnblogs.com/shmily-code/p/9512383.html...
Vue过滤器
weixin_67651040的博客
03-18 1693
过滤器分为两种，一种为单个组件的过滤器，也叫做局部过滤器，一种vue实例全局过 滤器，他可以被应用到任何地方。过滤器也可以使用多个，会依次执行。例如下例中， 会把message的当做参数传入过滤器A中进行过滤，过滤器A过滤完的数据会返回值传 入过滤器B {{message | filterA | filterB}} 局部过滤器 1).在组件或vue实例里面使用。 2).定义的局部过滤器，只能在自己的组件内部使用 这是一个公共组件，提过一个...
Vue.js——局部过滤器&全局过滤器
五柳
04-14 2059
局部过滤器 在Vue实例中的写法 filters:{ convert(data, n){ return data.toFixed(n); }, } 即通过vue提供的filters选项，然后通过方法的方式写过滤函数，默认过滤函数第一个位置的形参代表要过滤的变量值 如果页面中需要传入...
vue的filter过滤器（在vue项目中全局和局部的用法）
weixin_53452157的博客
04-18 816
vue的filter过滤器（在vue项目中全局和局部的用法）
filter过滤器(全局和局部)
weixin_46031162的博客
04-25 154
1 后台时间戳的返回处理 通常后台返回的是时间戳 例如：1619314980 时间戳：即1970年1月1日到现在的经过的毫秒数 前端处理时间戳有两种方式： 1.利用new Date日期对象处理 var d=new Date(传入时间戳*1000) 再通过getFullYear(),getMonth(),getDate(),getHours(),getMinutes(),getSeconds() 2.利用moment.js第三方日期处理函数来实现【公司用的多】 网址:http://mo
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的过滤器是一种用于对模板中的数据进行处理和格式化的机制。你可以使用全局过滤器或局部过滤器来定义和使用过滤器。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值