精华内容
下载资源
问答
  • vue过滤器

    千次阅读 2020-04-17 16:41:37
    过滤数据是我们日常开发中必然会用到的。 常见的场景:当我们从后端请求到数据列表时,我们需要对其中符合条件的数据进行筛选、当我们拿到数据,我们希望把英文首字母大写,等等。 js常用的操作方法是filter: array...

    过滤数据是我们日常开发中必然会用到的。
    常见的场景:当我们从后端请求到数据列表时,我们需要对其中符合条件的数据进行筛选、当我们拿到数据,我们希望把英文首字母大写,等等。
    js常用的操作方法是filter:

    array.filter(function(currentValue,index,arr), thisValue)
    

    filter方法参数值
    我们一起来看个示例:

    const arr = [
    	{
            name: 'tom1',
            age: 23
        },
        {
            name: 'tom2',
            age: 42
        },
        {
            name: 'tom3',
            age: 17
        },
        {
            name: 'tom4',
            age: 13
        },
    ]
    const res = arr.filter(item => item.age > 18);
    console.log(res);
    console.log(arr);
    

    我们通过filter对数组进行过滤,筛选出年龄大于 18岁的数据,结果会返回一个新数组,且不会改变原始数组。结果展示:
    在这里插入图片描述
    好了,回归正题,我们在vue项目中,可能需要频繁的使用过滤,我们每次都拿到一次数据,进行过滤一次未免显得很冗余,这时就用到了我们vue的内置过滤器。
    在这里插入图片描述
    以上是vue官方对于过滤器的介绍,它通常被用在插值表达式或属性绑定上。
    过滤器分为两种,一种是单个组件的过滤器,也叫做局部过滤器,一种是vue实例全局的过滤器,它可以被应用在任何地方。
    过滤器也可以使用多个,会依次执行。例如下例中,会把message的当做参数传入A过滤器进行过滤,A过滤器过滤完的数据返回值会传入B过滤器

    {{ message | filterA | filterB }}
    
    • 局部过滤器使用案例:这是一个公共组件,提供一个msg属性接口供外界传入,当作标题进行展示,但是通常我们需要首字母进行大写,但是往往我们并不能限制到外界传入的数据,所以通过过滤器对于外界传入的值进行过滤处理,针对未传入数据时展示空字符串,传入数据后进行首字母大写转换
    <template>
      <div class="hello">
        <h1>{{ msg | capitalize }}</h1>
      </div>
    </template>
    
    <script>
    export default {
      name: "HelloWorld",
      props:['msg'],
      data() {
        return {};
      },
      filters: {
        capitalize: function(value) {
          window.console.log("rd: value", value);
          if (!value) return "";
          value = value.toString();
          return value.charAt(0).toUpperCase() + value.slice(1); // 首字母大写
        }
      }
    };
    </script>
    
    • 全局过滤器使用案例:在main.js中的Vue上添加全局过滤器,对全部字符进行大写转换(借用上面的案例,上面案例只是对首字母进行大写转换,然后返回值引用全局过滤器对所有字符进行大写转换)
      main.js:
    Vue.filter("upperCase", function(value) {
      if (!value) return "";
      value = value.toString();
      return value.toUpperCase(); // 小写转为大写
    });
    
    new Vue({
      router,
      store,
      render: (h) => h(App),
    }).$mount("#app");
    

    helloworld组件:

    <template>
      <div class="hello">
        <h1>{{ msg | capitalize | upperCase }}</h1>
      </div>
    </template>
    
    <script>
    export default {
      name: "HelloWorld",
      props: ["msg"],
      data() {
        return {};
      },
      filters: {
        capitalize: function(value) {
          window.console.log("rd: value", value);
          if (!value) return "";
          value = value.toString();
          return value.charAt(0).toUpperCase() + value.slice(1); // 首字母大写
        },
      },
    };
    </script>
    

    当然了,在实际业务中我们可能会经常用到过滤器,希望大家能更加优雅的使用,写出更好的代码。
    (- 。- 偷偷告诉你个小技巧,可以考虑针对时间戳格式化写成全局过滤器,就不用我们再每次都费心格式化了)
    好了,如有问题,请指出,接受批评。

    在这里插入图片描述
    个人微信公众号:
    在这里插入图片描述

    展开全文
  • 今天将要介绍的是vue中的过滤器,并且将实现一个日期格式化的小案例。 大家都知道,我们获取当前日期可以通过Date对象获取。下面我将获取当前时间并打印出来。 console.log(new Date()); 我们获取的是一个标准时间...
  • vue过滤器filters的作用是什么? 过滤器是一个通过输入数据,能够及时对数据进行处理并返回一个数据结果的简单函数。Vue有很多很便利的过滤器,可以参考官方文档。 能够帮我们处理快速一些数据的格式—-format...
  • vue 过滤器实例

    千次阅读 2020-10-06 08:13:37
    使用方法: {{字符串|局部过滤器得名字}}

    使用方法:

    {{字符串|局部过滤器得名字}}

    <template>
      <div id="app">
      	//这里
        {{msg|hongzhe}}
      </div>
    </template>
    <script>
    
    export default {
      data(){
        return {
          msg:"hello"
        }
      }
    }
    </script>
    

    全局过滤器

    在main.js中添加一下代码,调用方法在上一个代码块

    // The Vue build version to load with the `import` command
    // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
    import Vue from 'vue'
    import App from './App'
    import router from './router'
    
    Vue.config.productionTip = false
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      components: { App },
      template: '<App/>'
    })
    
    Vue.filter("hongzhe",function(value){
    	//如果字符串为空,返回。
        if(!value){
            return;
        }
        //获取字符串。
        value=value.toString();
    	//将字符串的第一个字母大写并返回。
        return value.charAt(0).toUpperCase()+value.slice(1);
    
    });
    

    局部过滤器

    <template>
      <div id="app">
      	//这里
        {{msg|hongzhe}}
      </div>
    </template>
    <script>
    
    export default {
      data(){
        return {
          msg:"hello"
            }
        },filters:{
            upper(value){
                //如果字符串为空,返回。
    		    if(!value){
    		        return;
    		    }
    		    //获取字符串。
    		    value=value.toString();
    			//将字符串的第一个字母大写并返回。
    		    return value.charAt(0).toUpperCase()+value.slice(1);
            }
        }
    
    }
    </script>
    
    展开全文
  • 本篇文章主要介绍了Vue过滤器的用法和自定义过滤器,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 采用vue单文件组件,使用moment插件格式化日期 <h1>{{date | dateFormat}} [removed] import moment from 'moment'; import 'moment/locale/zh-cn'; moment.locale('zh-cn'); export default { data() ...
  • 主要介绍了vue中的过滤器及其时间格式化,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • Vue过滤器

    2021-11-11 11:19:17
    使用全局方法Vue.filter()自定义一个全局过滤器。 每一个Vue对象实例(每一个VM实例)都可以拿到这个过滤器。它接收两个参数:过滤器的名称、过滤器函数 在插值表达式中使用 <p>{{msg | msgFormat}}</p>...

    过滤器

    自定义全局过滤器

    自定义全局过滤器

    全局过滤器的基本使用

    使用全局方法Vue.filter()自定义一个全局过滤器。
    每一个Vue对象实例(每一个VM实例)都可以拿到这个过滤器。它接收两个参数:过滤器的名称、过滤器函数

    1. 在插值表达式中使用
      <p>{{msg | msgFormat}}</p>
      管道符前面的msg即为要过滤的文本内容)
      管道符后面的msgFormat即为过滤器

    Linux管道符(管道操作符):可以把一个命令的标准输出传送到另一个命令的标准输入中,连续的|意味着第一个命令的输出为第二命令的输入,第二个命令的输入为第一个命令的输出,第二个命令的输出为第三个命令的输入…以此类推

    1. 定义过滤器
            // Vue.filter 中的第一个参数是过滤器的名称,第二个参数是具体的过滤器函数
            // 定义一个 Vue 全局的过滤器,名字叫做  msgFormat
            Vue.filter('msgFormat', function (myMsg) {  // function 的第一个参数指的是管道符前面的 msg
                // 字符串的  replace 方法,第一个参数,除了可写一个 字符串之外,还可以定义一个正则
                // 这里是将msg中所有的单纯替换为邪恶
                return myMsg.replace(/单纯/g, '邪恶')
            })
    
    • Vue.filter('名称', 函数) 其中第一个参数指的过滤器的名称(必须与管道符后的名称完全一致),第二个参数为过滤器函数
    • 过滤器函数function中,第一个参数指管道符前面的msg
    • String.prototype.replace() 该方法用于替换匹配的字符串,一般情况下只替换第一个匹配(除非使用带有g正则表达式

    示例代码:

    <!DOCTYPE html>
    <html lang="zh-CN">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script src="../code/lib/vue.js"></script>
    </head>
    
    <body>
        <div id="app">
        	<p>{{ msg }}</p>
            <p>{{ msg | msgFormat }}</p>
        </div>
    
        <script>
            // 定义一个 Vue全局的过滤器,名字叫做 msgFormat
            // 所谓的全局过滤器,就是所有的VM实例都共享的
            Vue.filter ('msgFormat', function(msg) {
                return msg.replace(/单纯/g, '邪恶')
            })
    		// 创建 Vue 实例,得到 ViewModel
            var vm = new Vue({
                el: '#app',
                data: {
                    msg: '曾经,我也是一个单纯的少年,单纯的我,傻傻的问,谁是世界上最单纯的男人'
                },
                methods: {}
            });
    
        </script>
    </body>
    
    </html>
    

    示例效果:
    在这里插入图片描述


    给过滤器添加一个或多个参数

    过滤器加一个参数

    将msg中的单纯替换为xxx变量

    <!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" content="ie=edge">
        <title>Document</title>
        <script src="vue2.5.16.js"></script>
    </head>
    
    <body>
        <div id="app">
            <!-- 通过过滤器 msgFormat 对 msg 进行过滤。括号里的参数代表 function中的 arg2-->
            <p>{{ msg | msgFormat('牛bee') }}</p>
    
        </div>
    
        <script>
            // 定义一个 Vue全局的过滤器,名字叫做 msgFormat
            // 所谓的全局过滤器,就是所有的VM实例都共享的
            Vue.filter('msgFormat', function (msg, arg2) {
                // 字符串的  replace 方法:第一个参数,除了可写一个 字符串之外,还可以定义一个正则;第二个参数代表要替换为上面的xxx
                //将 myMsg 中的所有`单纯`字样,修改为 arg2
                return msg.replace(/单纯/g, arg2)
            })
    
            // 创建 Vue 实例,得到 ViewModel
            var vm = new Vue({
                el: '#app',
                data: {
                    msg: '曾经,我也是一个单纯的少年,单纯的我,傻傻的问,谁是世界上最单纯的男人'
                },
                methods: {}
            });
        </script>
    </body>
    </html>
    

    在这里插入图片描述


    过滤器加两个参数

    <!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" content="ie=edge">
        <title>Document</title>
        <script src="vue2.5.16.js"></script>
    </head>
    
    <body>
        <div id="app">
            <!-- 通过 过滤器 msgFormat 对 msg 进行过滤-->
            <!-- 括号里的第一个参数代表 function 中的 arg2,括号里的第二个参数代表 function 中的 arg3-->
            <p>{{ msg | msgFormat('niubee', '+++') }}</p>
    
        </div>
    
        <script>
            // 定义一个 Vue全局的过滤器,名字叫做 msgFormat
            // 所谓的全局过滤器,就是所有的VM实例都共享的
            Vue.filter('msgFormat', function (myMsg, arg2, arg3) {
                // 字符串的  replace 方法:第一个参数,除了可写一个 字符串之外,还可以定义一个正则;第二个参数代表要替换为 xxx
                //将 myMsg 中的所有`单纯`字样,修改为`arg2 + arg3`
                return myMsg.replace(/单纯/g, arg2 + arg3)
            })
    
            // 创建 Vue 实例,得到 ViewModel
            var vm = new Vue({
                el: '#app',
                data: {
                    msg: '曾经,我也是一个单纯的少年,单纯的我,傻傻的问,谁是世界上最单纯的男人'
                },
                methods: {}
            });
        </script>
    </body>
    
    </html>
    
    

    在这里插入图片描述


    同时使用多个过滤器

    添加多个过滤器的实现思路:将msg交给第一个过滤器来处理,然后将处理后的结果交给第二个处理器来处理

    <!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" content="ie=edge">
        <title>Document</title>
        <script src="../../code/lib/vue.js"></script>
    </head>
    
    <body>
        <div id="app">
            <!-- 通过 两个过滤器(msgFormat、myFilter2)对 msg 进行过滤-->
            <!-- 将 msg 交给第一个过滤器来处理,然后将处理的结果交给第二个过滤器来处理-->
            <p>{{ msg }}</p>
            <p>{{ msg | msgFormat('niubee', '+++') | myFilter2}}</p>
    
        </div>
    
        <script>
            // 定义一个 Vue 全局的过滤器,名字叫做  msgFormat
            Vue.filter('msgFormat', function (myMsg, arg2, arg3) {
                // 字符串的  replace 方法:第一个参数,除了可写一个 字符串之外,还可以定义一个正则;第二个参数代表要替换为 xxx
                //将 myMsg 中的所有`单纯`字样,修改为`arg2 + arg3`
                return myMsg.replace(/单纯/g, arg2 + arg3)
            })
    
            //定义第二个全局过滤器
            Vue.filter('myFilter2', function (myMsg) {
                //在字符串 msg 的最后面加上【后缀】
                return myMsg + '[--第二个过滤器--]'
            })
    
            // 创建 Vue 实例,得到 ViewModel
            var vm = new Vue({
                el: '#app',
                data: {
                    msg: '曾经,我也是一个单纯的少年,单纯的我,傻傻的问,谁是世界上最单纯的男人'
                },
                methods: {}
            });
        </script>
    </body>
    
    </html>
    

    在这里插入图片描述


    示例1:时间格式化

    使用ES6新增的字符串方法 String.prototype.padStart(maxLength, fillString='')String.prototype.padEnd(maxLength, fillString='')来填充字符串。pad补充.

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script src="../../code/lib/vue.js"></script>
    </head>
    
    <body>
        <div id="app">
            {{ time }}
            <br/> 
            {{ time | dataFormat }}
            <br>
            {{ time | dataFormat('yyyy-mm-dd') }}
        </div>
    
        <div id="app1">
            <br>
            {{ time | dataFormat }}
        </div>
    </body>
    <script>
    
        // 定义一个名称为 datafmt的全局过滤器
        // pattern需要指定默认值 防止调用toLowerCase报错
        Vue.filter('dataFormat', function (input, pattern="") {
            // 过滤器的逻辑:将input的值格式化成 yyyy-MM-dd 字符串输出
            var dt = new Date(input)
            // yyyy-mm-dd
            var y = dt.getFullYear()
            var m = (dt.getMonth() + 1).toString().padStart(2,'0')
            var d = dt.getDate().toString().padStart(2,'0')
    
            // 如果调用过滤器的参数写的是 yyyy-mm-dd,那就按照 yyyy-mm-dd 的这种格式写
            if(pattern.toLowerCase() === 'yyyy-mm-dd') {
                return `${y}-${m}-${d}`
            } else {
                var hh = dt.getHours().toString().padStart(2,'0')
                var mm = dt.getMinutes().toString().padStart(2,'0')
                var ss = dt.getSeconds().toString().padStart(2,'0')
    
                return `${y}-${m}-${d} ${hh}:${mm}:${ss} ~~`
            }
        });
        
        new Vue({
            el: '#app',
            data: {
                time: new Date()
            }
        })
    
        new Vue({
            el: '#app1',
            data: {
                time: new Date()
            }
        });
    </script>
    </html>
    

    时间过滤器
    pattern参数:
    在做if(pattern && pattern.toLowerCase() === 'yyyy-mm-dd')判断时,逻辑上是先保证pattern参数穿进来了,然后再继续后面的判断

    如果写成了if(pattern.toLowerCase() === 'yyyy-mm-dd')则可能在调用的时候不传入pattern参数从而造成错误。此时if语句相当于if(undefined.toLowerCase() === 'yyyy-mm-dd')


    举例2:列表功能

    使用ES6新增String.prototype.includes()返回布尔值,表示是否找到了参数字符串

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>列表功能</title>
        <script src="../code/lib/vue.js"></script>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
                .table {
                    width: 800px;
                    margin: 20px auto;
                    border-collapse: collapse;  /* 将表格的两边框合并为一条,这一行不能少。 */
                }
                .table th {
                    background-color: #0094ff;
                    color: white;
                    font-size: 16px;
                    border: 1px solid black;
                    padding: 5px;
                }
                .table tr td {
                    text-align: center;
                    font-size: 16px;
                    padding: 5px;
                    border: 1px solid black;
                }
    
                .form {
                    width: 800px;
                    margin: 20px auto;
                }
                .form button {
                    margin-left: 5px;
                }
                .form label {
                    width: 100%;
                }
        </style>
    </head>
    <body>
        <div id="app">
            
            <div class="form">
                编号:<input type="text" v-model="formData.id">
                名称:<input type="text" v-model="formData.name">
    
                <button @click="addData">添加</button>
    
                <label>
                    搜索名称关键字:
                    <input id="sch" type="text" v-model="formData.keywords">
                </label>
            </div>
    
    
            <table class="table">
                <th>编号</th>
                <th>名称</th>
                <th>创建时间</th>
                <th>操作</th>
    
                <!-- v-for 中的数据,都是直接从 data 上的list中直接渲染过来的 -->
                <!-- 现在我们自定义一个 search 方法,同时把所有的关键字,通过传参的形式,传递给了 search方法 -->
                <!-- 在 search 方法内部,通过执行for循环,把所有符合搜索关键字的数据,保存到一个新数组中并返回 -->
                <tr v-for="item in search(formData.keywords)" :key="item.id">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.ctime | dataFormat('yyyy-mm-dd')}}</td>
                    <td><a href="#" @click.prevent="delData(item.id)">删除</a></td>
                </tr>
    
                <!-- 无数据时,增加提示 -->
                <tr v-if="list.length == 0">
                    <td colspan="4">列表无数据</td>
                </tr>
            </table>
        </div>
    
        <script>
    
            // 全局的过滤器,进行时间的格式化
            Vue.filter('dataFormat', function (dataStr, pattern="") {
                //根据给定时间字符串,得到特定时间
                var dt = new Date(dataStr)
    
                var y = dt.getFullYear()
                var m = (dt.getMonth() + 1).toString().padStart(2,'0')
                var d = dt.getDate().toString().padStart(2,'0')
    
                // return y + '-' + m + '-' + d
                // 统一改成小写
                if(pattern.toLowerCase() === 'yyyy-mm-dd') {
                    return `${y}-${m}-${d}`
                } else {
                    var hh = dt.getHours().toString().padStart(2,'0')
                    var mm = dt.getMinutes().toString().padStart(2,'0')
                    var ss = dt.getSeconds().toString().padStart(2,'0')
    
                    return `${y}-${m}-${d} ${hh}:${mm}:${ss} ~~~~~`
                }
            })
    
    
    
    
            var vm = new Vue({
                el: '#app',
                data: {
                    list: [
                        {id: 1, name: '奔驰', ctime: new Date},
                        {id: 2, name: 'AE86', ctime: new Date}
                    ],
                    //用户添加的数据
                    formData: {
                        id: '',
                        name: '',
                        keywords: '',
                    },
                    
                },
                methods: {
                    addData() {         //添加内容的方法
                        var p = {id: this.formData.id, name: this.formData.name, ctime: new Date()}
                        this.list.push(p)
    
                        this.formData.id = ''
                        this.formData.name = ''
                    },
                    delData(id) {       //根据ID删除数据
                        if(!confirm('是否要删除数据?')) {
                            return
                        }
    
                        // //1 
                        // var index = this.list.findIndex((item)=>{
                        //     return item.id == id
                        // })
                        // this.list.splice(index, 1)
                        
                        //2
                        this.list.some((item, i) => {
                            if(item.id == id) {
                                this.list.splice(i, 1)
                                return true
                            }
                        })
    
                    },
                    search(keywords) {  //根据关键字,进行数据的搜索
                        // var newList = []
                        // this.list.forEach(item => {
                        //     // item.formData.name.indexOf()  错误
                        //     if(item.name.indexOf(keywords) != -1) {
                        //         newList.push(item)
                        //     }
                        // })
                        // return newList
    
                        // 注意: forEach  some  filter  findIndex  这些都属于数组的新方法
                        // 都会对数组的每一项进行遍历,执行相关的操作
                        return this.list.filter(item => {
                            // if(item.name.indexOf(keywords) != -1)
                         
                            // ES6中,为字符串提供了一个新方法,叫做 String.prototype.includes('要包含的字符串')
                            // 如果包含则返回true,否则返回false
                            if(item.name.includes(keywords)) {
                                return item
                            }
                        })
                    }
                }
            });
    
            document.getElementById("sch").focus()
        </script>
    </body>
    </html>
    

    请添加图片描述


    自定义私有过滤器

    私有过滤器:即在一个vue对象内部定义的过滤器。这种过滤器只有在当前vue对象的el指定的监管区域有作用。

    过滤器调用的时候,采用的是就近原则,如果私有过滤器和全局过滤器名称一致了,这时候 优先调用私有过滤器。

    <!DOCTYPE html>
    <html lang="zh-CN">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script src="../code/lib/vue.js"></script>
    </head>
    
    <body>
        <div id="app">
            <p>{{ msg }}</p>
            全局过滤器: <span>{{ msg | msgFormat('牛bee')}}</span>
        </div>
    
        <div id="app2">
            私有过滤器: <span>{{ msg | msgFormat('Crazy')}}</span>
        </div>
    
        <script>
            // 定义一个 Vue全局的过滤器,名字叫做 msgFormat
            // 所谓的全局过滤器,就是所有的VM实例都共享的
            Vue.filter ('msgFormat', function(msg, arg) {
                return msg.replace(/单纯/g, arg)
    
            })
    
            var vm = new Vue({
                el: '#app',
                data: {
                    msg: '曾经,我也是一个单纯的少年,单纯的我,傻傻的问,谁是世界上最单纯的男人'
                },
                methods: {}
            });
    
    
            // 如何定义一个私有的过滤器(局部)
            var vm2 = new Vue ({
                el: '#app2',
                data: {
                    msg: '曾经,我也是一个单纯的少年,单纯的我,傻傻的问,谁是世界上最单纯的男人'
                },
                methods: {
    
                },
                filters: {  // 定义私有过滤器  过滤器有两个条件 【过滤器名称 和 处理函数】
                    // 过滤器调用的时候,采用的是就近原则,如果私有过滤器和全局过滤器名称一致了,这时候 优先调用私有过滤器
                    msgFormat: function(msg, arg) {
                        return msg.replace(/单纯/g, arg)
                    }
                }
    
            })
        </script>
    </body>
    
    </html>
    

    私有过滤器


    github-vue基础-过滤器

    展开全文
  • import Vue from 'vue' import App from './App.vue' import 'bootstrap/dist/css/bootstrap.min.css' Vue.config.productionTip = false Vue.filter('Upcase',val=> val.toUpperCase()) new Vue({ render: h...

    第一种,全局,写在main.js里

    import Vue from 'vue'
    import App from './App.vue'
    import 'bootstrap/dist/css/bootstrap.min.css'
    
    Vue.config.productionTip = false
    
    Vue.filter('Upcase',val=> val.toUpperCase())
    
    new Vue({
      render: h => h(App),
    }).$mount('#app')
    

    第二种,局部写在vue配置函数里

    <script>
    export default {
      filters:{
        reverse(val){
          return val.split('').reverse().join('')
        }
      }
    }
    </script>
    
    展开全文
  • 又来学习源码系列,今天就看一下vue中的过滤器具体是怎么实现的,我觉得这是一个不常用但是很重要的知识点,开冲! 01 前言 过滤器实质不改变原始数据,只是对数据进行加工处理后返回过滤后的数据再进行调用处理。...
  • vue过滤器处理金额

    2020-10-11 15:57:05
    {{item.realMoney|filterMoney}} filters: { filterMoney(value) { return (value/100).toFixed(2); } },
  • 本文实例讲述了vue过滤器用法。分享给大家供大家参考,具体如下: 过滤器: vue提供过滤器: capitalize uppercase currency…. {{msg|currency ¥}} debounce 配合事件,延迟执行 <input type=text @...
  • 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过滤器和路由

    2020-04-04 15:32:23
    过滤器 过滤器就是数据在真正渲染到页面中的时候,可以使用这个过滤器进行一些处理,把最终处理结果渲染到网页中。 过滤器的使用: 过滤器可以用在两个地方“双花括号插值** 和 v-bind 表达式。过滤器应该被添加在 ...
  • 程序编写通常也会有很多类似的骚操作,在vue中提供自定义过滤器, 得到更需要的精准数据,来了解一下 需求: 展示一个产品的价格price。 解析需求: 产品的价格可能包含小数点,可能该产品还未定义用‘–’来表示...
  • vue过滤器解析并插入 html 标签

    千次阅读 2019-10-08 16:01:55
    <div v-html="$options.filters.formater(item[it.name],it.formater,it.pattern)"> </div> formater: function (value,incomingType,type) { let ...
  • 如下所示: <!DOCTYPE html> <html> <head lang=en> <meta charset=UTF-8> <title></title> </head> <body> <input type=text v-model='search' /&... var vm =
  • Vue过滤器的几种用法

    2020-03-01 16:23:15
    Vue过滤器的几种用法 本文主要介绍Vue项目中filter的几种用法。 一. 单独在组件或者是页面中使用 单独在页面或者是组件中使用vue filter比较简单,主要是用在{{ }} 和v-bind指令中。 简单的代码示例如下: <!-- 在...
  • vue过滤器取data中的值

    2020-11-23 19:13:48
    取值的最终结果 data中定义变量 that全局变量,可以调用此页面的所有方法,和data变量,用此种方式可以在过滤器中使用data中的变量 create中初始化 最后即可正常使用
  • vue过滤器使用方法

    2020-11-24 14:02:43
    vue过滤器使用方法 过滤器分全局过滤器和局部过滤器。和自定义指令一样,过滤器对应的函数中的this是window(无论是全局的还是局部的),而不是当前vue的实例。 <!DOCTYPE html> <html> <head>...
  • Vue官网对过滤器的介绍是:Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在...
  • Vue.js 允许你自定义过滤器,可被用作一些常见的文本格式化。过滤器可以用在两个地方:mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符指示。 一、 私有过滤器vue...
  • 主要介绍了在vue中使用公共过滤器filter的方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • Vue过滤器的使用

    2019-12-26 23:36:04
    vue过滤器可以格式化常见的文本,vue中的过滤器只能在插值表达式’{{}}‘和v-bind中使用 Vue中的全局过滤器的使用 定义一个Vue全局过滤 Vue.filter('过滤器名称',函数) 定义一个Vue全局过滤器很简单,使用Vue的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 35,015
精华内容 14,006
关键字:

vue过滤器

vue 订阅