解读vue filter

1.全局filter, 全局的过滤一般在main.js里面使用

 <div id="app">
        <div>
            {{testVal | filVal(10,30)}}
        </div>
 </div>
<script>
        Vue.filter(‘filVal‘, function(val, first, second) {
            return val + first + second;
        });
        new Vue({
            el: ‘#app‘,
            data:
                testVal: 20
            },
        })
 </script>

 2.局部filter, filter要放在new vue里面, 此时filter要加上s==>filters

 new Vue({
            el: ‘#app‘,
            data: {
                testVal: 20
            },
            methods: {

            },
            filters: {
                filVal: function(val, val1, val2) {
                    return val + val1 + val2
                }
            }
        })

  

不管是全局过滤还是布局过滤,都是可以传多个值得 ,渲染时用管道符分隔.  在上面传的三个值中,第一个是要过滤的值, 后面的值是过滤传的参数

3,添加多个filter

<div id="app">
        <div>
            {{testVal | filVal1(10,30) | filVal2("測試") | filVal3("====")}}
        </div>
    </div>

    <script>
        new Vue({
            el: ‘#app‘,
            data: {
                testVal: 20,
                filTest: "測試測試"
            },
            methods: {

            },
            filters: {
                filVal1: function(val, val1, val2) {
                    return val + val1 + val2
                },
                filVal2: function(val, val2) {
                    return val + val2
                },
                filVal3: function(val, val2) {
                    return val + val2
                },
            }
        })
    </script>

  

原文地址:https://www.cnblogs.com/lianxisheng/p/9977901.html

时间: 2024-10-01 21:27:38

解读vue filter的相关文章

Vue2.0 注册过滤器Vue.filter

Vue.filter( id, [definition] ) 参数: {string} id {Function} [definition] 用法: 注册或获取全局过滤器 1 // 注册 2 Vue.filter('my-filter', function (value) { 3 // 返回处理后的值 4 }) 5 // getter,返回已注册的过滤器 6 var myFilter = Vue.filter('my-filter') 根据上一遍笔记,可以在新的Vue2.0里面注册过滤器

Vue.filter 过滤器

[过滤器] import Vue from '../../../node_modules/vue/dist/vue'; // 后台数据与前端展示数据需要换算,与后台交互的请求的参数是不需要.假如说前端展示价格是按照元来算,而后台提供的数据是按分来算,在提交给后台,还是按照分来算. // 全局过滤器 Vue.filter('YuanToFen', function (value) { if (!Number(value)) return 0; value = Number(value); retu

Vue.filter date

Vue.filter('date', function(value, format) { var o = { "M+": value.getMonth() + 1, // 月份 "d+": value.getDate(), // 日 "h+": value.getHours(), // 小时 "m+": value.getMinutes(), // 分 "s+": value.getSeconds(), /

Vue filter

1.局部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-Compatibl

vue源码解读预热-0

vueJS的源码解读 vue源码总共包含约一万行代码量(包括注释)特别感谢作者Evan You开放的源代码,访问地址为Github 代码整体介绍与函数介绍预览 代码模块分析 代码整体思路 总体的分析 从图片中可以看出的为采用IIFE(Immediately-Invoked Function Expression)立即执行的函数表达式的形式进行的代码的编写 常见的几种插件方式: (function(,){}(,))或(function(,){})(,)或!function(){}()等等,其中必有

vue的过滤器filter

前记: 排版记录,点耽误时间,我就简单的来,下面是一个vue 过滤器的写法,demo 演示,限制一个字符串的长度. vue filter 的官网介绍 https://cn.vuejs.org/v2/guide/filters.html 下面就具体拿自己的一个例子介绍: 某个filter.js // 限制汉字的个数 export const limitWordLength = Vue.filter('limitWordLength', (str, length, sufix) => { /* es

vue 全局filter的坑

下面连段代码的filter放在不同的位子会有不同的效果, 1.filter放在new vue之后,居然不起作用 <script> new Vue({ el: '#app', data: { isActive: true, hasError: true, testVal: 20 } }) Vue.filter('filVal', function(val, first, second) { return val + first + second; }) </script> 2.fil

Vue入门三、过滤器filter

Vue中过滤器有两种:1.全局过滤器Vue.filter('过滤器名',过滤方式fn);2.组件内过滤器filters:{'过滤器名',过滤方式fn}使用:{{msg|过滤器方法名}} 一.局部过滤器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head>

vue基础----过滤器filter

1.用的场景:一个功能在每个组件都能用,而computed虽然有缓存,但不能用在每一个组件,需要的话的每一个都需要写. 2.特点:改变数据的展示形式,不改变原有的形式 分为全局与局部的 <div id="app"> <!--{{msg | upper}} --> {{msg | upper("l")}} </div> <script src="./node_modules/vue/dist/vue.js"