精华内容
下载资源
问答
  • vue过滤器使用方法

    2020-11-24 14:02:43
    vue过滤器使用方法 过滤器分全局过滤器和局部过滤器。和自定义指令一样,过滤器对应的函数中的this是window(无论是全局的还是局部的),而不是当前vue的实例。 <!DOCTYPE html> <html> <head>...

    vue过滤器使用方法

    过滤器分全局过滤器和局部过滤器。和自定义指令一样,过滤器对应的函数中的this是window(无论是全局的还是局部的),而不是当前vue的实例。

    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
    </head>
    
    <body>
      <div id="app">
        <!-- 过滤器可以传递参数 -->
        <h1>{{name|money(name,age)}}</h1>
    
        <h1>{{name|money(name,age)|newName}}</h1>
      </div>
      <script src="../node_modules/vue/dist/vue.js"></script>
      <script>
        /* 
         过滤器:全局过滤器和局部过滤器
        */
       // 全局过滤器
       Vue.filter('money', function(){
         // 过滤器中的this是window
         console.log(this); // window
         
         console.log(arguments);  // arguments的第一项是 管道符 前面表达式对应的值,后面依次是使用过滤器时传递的实参
         // 过滤器和计算属性一样,一定要return一个值
         return '我是过滤器'; // 页面上最后展示的是过滤器return的值
       });
    
       Vue.filter('newName', function(val){
         console.log(val); // 获取的是前面过滤器return的值
    
         return '我是新的过滤器'
       })
        let vm = new Vue({
          el: '#app',
          data: {
            name: '测试',
            age:100
          },
    
          // 局部过滤器
          filters: { 
            // 过滤器中的this是window,而不是当前实例;过滤器不会被挂载到当前实例上
            newName(val) { 
              // 有私有的优先使用私有的
              console.log(val);
              console.log(this); // window
              return '我是私有过滤器'
            }
          }
        });
         // 注意:过滤器不会被挂载到当前实例上 
         console.log(vm.newName); // undefined
      </script>
    </body>
    
    </html>
    
    
    展开全文
  • 前言 vue过滤器filters的作用是什么? 过滤器是一个通过输入数据,能够及时对数据进行处理并返回一个数据结果的简单函数。...接下来,我们可以想象一个比较简答的例子,使用Vue的 filterBy + orderBy 过滤器
  • Vue过滤器使用(全局、局部) 转载 : 借鉴大佬文章 这里只写全局过滤器 定义无参全局过滤器 <div id="app"> <p>{{ msg | msgFormat}}</p> </div> <script> // 定义一个 Vue ...

    Vue过滤器使用(全局、局部)

    转载 : 借鉴大佬文章

    • 这里只写全局过滤器

    定义无参全局过滤器

    <div id="app">
      <p>{{ msg | msgFormat}}</p>
    </div>
    
            <script>
                // 定义一个 Vue 全局的过滤器,名字叫做  msgFormat
                Vue.filter('msgFormat', function(msg) {
                    // 字符串的  replace 方法,第一个参数,除了可写一个 字符串之外,还可以定义一个正则
                    return msg.replace(/单纯/g, 'xx')
                })`在这里插入代码片`
            </script>
    

    定义有参全局过滤器

    <div id="app">
      <p>{{ msg | msgFormat('疯狂','--')}}</p>
    </div>
    
            <script>
                // 定义一个 Vue 全局的过滤器,名字叫做  msgFormat
                Vue.filter('msgFormat', function(msg, arg, arg2) {
                    // 字符串的  replace 方法,第一个参数,除了可写一个 字符串之外,还可以定义一个正则
                    return msg.replace(/单纯/g, arg+arg2)
                })
          </script>
    

    注意:


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


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

    展开全文
  • vue过滤器使用 filter

    2019-09-16 16:30:13
    1.filter的使用场景,一般为当后端返回数据为判断显示某个内容时,原来通常使用v-if现在改用filter便于管理 1.创建filter文件 import Vue from 'vue'; /*订单页面详情页面,状态栏*/ Vue.filter('...

    1.filter的使用场景,一般为当后端返回数据为判断显示某个内容时,原来通常使用v-if现在改用filter便于管理

    1.创建filter文件

    import Vue from 'vue';
    
    /*订单页面详情页面,状态栏*/
    Vue.filter('settleAccountsType',(val)=>{
      if(val==4){
        return `订单已取消!`
      }else if(val==5) {
        return `订单已作废!`
      }
      else if(val==6) {
        return `订单申请退款`
      }else{
        return ``
      }
    });
    export default {
    
    }
    

    2.在main中挂载

    
    import Vue from 'vue'
    import ElementUI from 'element-ui';
    import 'element-ui/lib/theme-chalk/index.css';
    import App from './App'
    import router from './router'
    import $ from 'jquery'
    import axios from 'axios'//引入axios
    import Vuex from 'vuex'
    import store from './store/store';
    import filter from '@/assets/js/filter.js';//过滤器全局
    
    Vue.config.productionTip = false;
    
    Vue.use(ElementUI);
    Vue.use(Vuex);
    // Vue.use(axios);
    Vue.prototype.axios = axios;
    Vue.use(filter);//过滤器全局挂载
    
    /* eslint-disable no-new */
    
    new Vue({
      el: '#app',
      router,
      filter,//过滤器全局挂载
      store,//使用store
      components: { App },
      template: '<App/>'
    });
    
    

    3.在页面使用

    <!--过滤器使用-->
          <div class="statusIf">{{ status | settleAccountsType }}</div>
    解释:status :vue页面绑定的数据,就是原来v-if判断的数据
             settleAccountsType :过滤器js中的方法名
    
    
    展开全文
  • 程序编写通常也会有很多类似的骚操作,在vue中提供自定义过滤器, 得到更需要的精准数据,来了解一下 需求: 展示一个产品的价格price。 解析需求: 产品的价格可能包含小数点,可能该产品还未定义用‘–’来表示...

    在生活中把一些含有我们需要的东西但是比较粗旷通过一定的装置过滤出更接近需要的产品,这个装置大概就是过滤器。
    比如:过滤沙子的纱网,经过纱网过滤可以得出精细的沙子;程序编写通常也会有很多类似的骚操作,在vue中提供自定义过滤器,
    得到更需要的精准数据,来了解一下

    需求:

    展示一个产品的价格price。

    解析需求:

    产品的价格可能包含小数点,可能该产品还未定义用‘–’来表示

    开发需求

    前端从后端获取一个价格数据字段price,这个字段可能包含的结果是null,‘ ’,或者是undefined ,这个时候在页面用‘——’展示,如果是正常的数据
    如10.99 就直接显示

    以下所有的代码均在vue中开发实现

    JavaScript思维原生实现

    定义一个方法来来处理,获取到的数据,处理然后使用

    vue的HTML模板

    <div id="app">
        {{price}}元
     </div>
    

    JavaScript

    export default {
      name: 'App',
      data (){
        return {
          price:''
        }
      },
      created() {
    	  // 模拟后台动态获取数据
        setTimeout(()=>{
    		// 00,‘’,null 等行为
          let ajaxPrice='11.00';
           this.formatPrice( ajaxPrice)
        },1000)
      },
      methods: {
        formatPrice(value){
          if (value === null || value === '' || value === undefined) {
           this.price ='--';
          }
          this.price = value;
        }
      },
    }
    

    这样就可以完美的实现数据格式的转变,在整个js代码中没有任何问题,同样也可以扩展,那么为什么vue还要高一个自定义过滤器?
    先用vue的过滤器来实现以下看看。有什么区别

    vue过滤器实现

    vue的HTML模板

    <div id="app">
        {{price|formatPrice}}元
      </div>
    

    vue过滤器的实现部分

    filters:{
        formatPrice(value){
          if (value === null || value === '' || value === undefined) {
           return '--';
          }
          return value;
        }
      }
    
    明显区别:

    1、JavaScript 通过在业务代码中添加方法,达到格式化的目的;vue定义的过滤器则剥离开业务代码,在模版中格式化,更具有可读性和选择性
    2、JavaScript原生思维语意话不明显,vue过滤器直接就知道该方法是用了过滤格式化的filters {}里面定义,更加规范
    3、减少变量的耦合性,JavaScript中定义了中间变量来处理,vue过滤器则不需要

    估计还有其他区别,需要明确的是在整个vue项目中的对比,想表达的是在vue项目中就按照vue的框架办事,可以事半功倍

    vue过滤器

    vue 官网文档定义:

    1、用于一些常见的文本格式化
    2、用在双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)
    3、添加在 JavaScript 表达式的尾部

    使用的地方

    一、在双花括号中 使用,如上面价格的例子

      {{price|formatPrice }}元
    

    由“管道”符号来实现
    formatPrice 可以理解为过滤器函数,而price就是需要格式化的数据,通过vue特定的方式传递到formatPrice函数进行处理最终得到格式化的数据

    二、在 v-bind 中属性格式化

    <div id="app" :sr='price|formatPrice'>
    </div>
    

    结果和在双花括号是是一样的

    综上所述,使用很简单,语意也很明显,维护方便一眼便知

    那么如何定义过滤器呢!

    定义过滤器

    点击继续阅读原文

    展开全文
  • 说明 今天将要介绍的是vue中的过滤器,并且将...在vue中,我们可以使用过滤器来进行时间格式化。它的写法如下: // Vue.filter(过滤器名称,处理函数) 使用的方式 {{ 过滤器数据| 过滤器名称 }} 具体代码 代码如下
  • 在table中,需要对obj的数据类型进行文字...以前的习惯是每一个过滤方法都写一个方法进行转换,例如:  页面代码: <el-table-column width="200px"align="left" label="性别"> <template slot-sco...
  • 主要介绍了Vue filter 过滤器、以及在table中的使用介绍,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 主要介绍了vue中的过滤器及其时间格式化,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • 本篇文章主要介绍了Vue过滤器的用法和自定义过滤器,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • vue过滤器使用

    千次阅读 2016-12-08 17:16:54
    vue过滤器使用的例子 vue过滤器
  • VueJs 提供了强大的过滤器API,能够对数据进行各种过滤处理,返回需要的结果。这篇文章主要给大家介绍vue 过滤器filter实例,感兴趣的朋友跟随脚本之家小编一起学习吧
  • vue过滤器、计算属性

    2020-11-03 15:00:40
    Vue.filter("过滤器名称", 过滤器处理函数): 3.如何使用全局过滤器 {{msg | 过滤器名称}} :value="msg | 过滤器名称" 4.过滤器注意点 4.1只能在插值语法和v-bind中使用 4.2过滤器可以连续使用
  • 主要介绍了Vue 过滤器filters的实例代码以及vue过滤器的基本用法,需要的朋友可以参考下
  • VUE过滤器的实现参考了linux的shell命令的管道的实现原理:即上一个命令的输出,是下一个命令的输入。 所以过滤器可以串接使用:{{数据 | 过滤器A | 过滤器B}} 除了在插值表达式中可以使用过滤器,在后文中将要...
  • 主要介绍了在vue使用公共过滤器filter的方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • vue过滤器取data中的值

    2020-11-23 19:13:48
    取值的最终结果 data中定义变量 that全局变量,可以调用此页面的所有方法,和data变量,用此种方式可以在过滤器使用data中的变量 create中初始化 最后即可正常使用
  • 平时开发中,需要用到过滤器的地方有很多,比如单位转换、数字打点、文本格式化等,比如: Vue.filter('toThousandFilter', function (value) { if (!value) return '' value = value.toString() return ....
  • 过滤器是一个通过输入数据,能够及时对数据进行处理并返回一个数据结果的简单函数。下面这篇文章主要给大家介绍了关于vue.js中过滤器使用的相关资料,需要的朋友可以参考借鉴,下面来看看详细的介绍。
  • 如下所示: <!DOCTYPE html> <html> <head lang=en> <meta charset=UTF-8> <title></title> </head> <body> <input type=text v-model='search' /&... var vm =
  • vue过滤器小案例

    2018-12-29 16:30:20
    下面就是过滤器使用小案例 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="../lib/vue.js" type="text/j...
  • vue过滤器

    千次阅读 2020-04-17 16:41:37
    过滤数据是我们日常开发中必然会用到的。 常见的场景:当我们从后端请求到数据列表时,我们需要对其中符合条件的数据进行筛选、当我们拿到数据,我们希望把英文首字母大写,等等。 js常用的操作方法是filter: array...
  • 需求:vue中,除了在模板中使用过滤器,有时候,methods中也需要使用filters中的过滤器, 网友hongz1125提出的解决办法: this.$options.filters[filter](...args) //这种方法很简单,也很实用 下面是我的方法,有点...
  • Vue过滤器的几种用法

    2020-03-01 16:23:15
    Vue过滤器的几种用法 本文主要介绍Vue项目中filter的几种用法。 一. 单独在组件或者是页面中使用 单独在页面或者是组件中使用vue filter比较简单,主要是用在{{ }} 和v-bind指令中。 简单的代码示例如下: <!-- 在...
  • 主要介绍了Vue3不支持Filters过滤器的问题,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • 主要介绍了vue2 v-model/v-text 中使用过滤器的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 过滤器 1.过滤器规则 Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式...过滤器分为全局过滤器和本地过滤器,全局过滤器顾名思义就是所有Vue实例挂载的元素内都能使用,而本地过滤器则是指只有过滤器函数所在的
  • vue.js的filter定义的方式,已经简单的demo,自定义过滤器如何给文字加颜色

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 37,469
精华内容 14,987
关键字:

vue过滤器如何使用

vue 订阅