vue filter的四种用法小结

目录
  • filter的用法小结
  • filter的基本用法

filter的用法小结

使用计算属性app.js

var app5 = new Vue({
    el: '#app5',
    data: {
        shoppingList: [
            "Milk", "Donuts", "Cookies", "Chocolate", "Peanut Butter", "Pepto Bismol", "Pepto Bismol (Chocolate flavor)", "Pepto Bismol (Cookie flavor)"
        ],
        key: ""
    },
    computed: {
        filterShoppingList: function () {
            // `this` points to the vm instance
            var key = this.key;
            var shoppingList = this.shoppingList;
            return shoppingList.filter(function (item) {
                return item.toLowerCase().indexOf(key.toLowerCase()) != -1
            });;
        }
    }
})

app.html

<div id="app5">
        <h2>Vue-for</h2>
        <ul>
            <li v-for="item in shoppingList">
                {{ item }}
            </li>
        </ul>
        <h2>Vue-for filter实现</h2>
        <ul>
            Filter Key<input type="text" v-model="key">   
            <li v-for="item in filterShoppingList">
                {{ item }}
            </li>
        </ul>        
    </div>    

最终效果实现了根据关键字来过滤列表的功能。

filter的基本用法

filter是和data  computed   methods watch一样，都是new Vue（）的参数。

用于对简单数据的处理，和computed有冲突，所以从vue2.0后就对filter做了删减，我觉得没有filter完全能够用其他方法比如computed来实现

用在{{ 变量1 | 变量2 }} 或者 v-bind：xx=“  变量1 | 变量2（[参数） ”  两种；其中变量1是data的k，变量2是filter的k，

filter：{ 变量2：function（变量1，参数）{xxxx}}

<div id="app">
        <div> {{val | upcaseVal(true)}}</div>
        <div v-bind:title="val | upcaseVal">{{val}}</div>
        <div>{{val | removeSpace}}</div>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                val: 'hello world'
            },
            filters: {
                upcaseVal: function (val, firstUpper) {//filter里函数的参数需要特别注意 第一个是指|前的值，第二个是true
                    if (firstUpper) {
                        return val.split(' ').map(function (e) {
                            return e[0].toUpperCase() + e.slice(1)
                        }).join(' ')
                    }
                    return val.toUpperCase();
                },
                removeSpace:function(val){
                    return val.toUpperCase()
                }
            }
        })

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue中filter的应用场景详解

    filter一般用于过滤某些值,比如我这个字段是空,可是我想在前端显示"–",就可以使用到它了. 最近碰到一个需求就是要给某些字段可以设置权限去以其他形式显示,比如以"***"显示需要隐藏的金额. 1.获取金额权限 2.通过filter过滤满足条件的字段 3.返回隐藏的样式 看代码: //其他的看,看我标注的就可以了 //scope.row 获取当前行 <template slot-scope="scope"> <templat

  • 如何使用vue过滤器filter

    概述 在 vue2.0 之前,是有内置过滤器的,在2.0中已经没有内置的过滤器了,但我们可以自定义过滤器. 关于 vue 过滤器,在官方文档中是这样说明的: Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化.过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持).过滤器应该被添加在 JavaScript 表达式的尾部,由"管道"符号指示. 即过滤器是用来格式化数据的一个函数.过滤器不会修改原始数据,它的作用是过滤数据,就是对数据进

  • vue中使用过滤器filters的this为undefined的问题

    目录 使用过滤器filters的this为undefined vue filter过滤器的用法 使用过滤器filters的this为undefined vue中的过滤器更偏向于对文本数据的转化,而不能依赖this上下文,如果需要使用到上下文this我们应该使用computed计算属性的或者一个method方法 vue filter过滤器的用法 {undefined{ args | filterFun }} |是管道符 用法如下 {{ time | formatDate }} 过滤器中 filte

  • VUE中的filters过滤器使用方法

    目录 前言 一.全局过滤器 1.全局过滤器之单一挂载 2.全局过滤器之批量挂载 二.组件过滤器 前言 Vue.js 允许我们自定义过滤器,可被用于一些常见的文本格式化.过滤器可以用在两个地方:双花括号({undefined{ }})插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持).过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号指示. <!-- 在双花括号中 --> <div>{{ message | capitalize }}</div

  • 详解Vue的数据及事件绑定和filter过滤器

    详解Vue的数据及事件绑定和filter过滤器

    目录 Vue数据绑定 单向绑定 双向绑定 值绑定 事件绑定 事件处理器 事件修饰符 键值修饰符 class与style绑定 绑定class 绑定内联样式 filter过滤器 总结 Vue数据绑定 单向绑定 将Model绑定到View后,当用JavaScript代码更新Model时,View会自动更新.(模型——>视图) 单向绑定的实现过程是: 所有数据只保存一份. 一旦数据变化,就去更新页面(只有data——>DOM,没有DOM——>data) 若用户在页面上做了更新,就手动收集(双向绑

  • 解决vue过滤器filters获取不到this对象的问题

    目录 vue过滤器filters获取不到this对象 原理 下面举个例子 Vue filters this指向问题 Vue实例中filter不依赖于当前vue实例上下文 vue过滤器filters获取不到this对象 原理 在data中定义一个属性that,把this存储到that中 在调用filters中的方法sum的时候将that传进去即可 下面举个例子 用filters计算data中 a+b 的值 注意:filters中的sum方法的第一个参数是|左边那个a,第二个参数才是括号写的that

  • vue filters和directives访问this的问题详解

    vue filters和directives访问this的问题详解

    目录 vue filters和directives访问this directives所遇小bug vue filters和directives访问this 记录一次奇葩的需求. 要求自定义一个指令,点击后能跳转指定路由. directives和filters压根就没法访问this. 脑袋都想破了. 不废话了,上代码. <template> <div> <div v-join="(divData, that)">tag标签</div> &l

  • vue filter的四种用法小结

    目录 filter的用法小结 filter的基本用法 filter的用法小结 使用计算属性app.js var app5 = new Vue({     el: '#app5',     data: {         shoppingList: [             "Milk", "Donuts", "Cookies", "Chocolate", "Peanut Butter", "Pe

  • 基于Vue SEO的四种方案(小结)

    基于Vue SEO的四种方案(小结)

    前言:众所周知,Vue SPA单页面应用对SEO不友好,当然也有相应的解决方案,下面列出几种最近研究和使用过的SEO方案,SRR和静态化基于Nuxt来说. 1.SSR服务器渲染: 2.静态化: 3.预渲染prerender-spa-plugin: 4.使用Phantomjs针对爬虫做处理. 1.SSR服务器渲染 关于服务器渲染:Vue官网介绍 ,对Vue版本有要求,对服务器也有一定要求,需要支持nodejs环境. 使用SSR权衡之处: 开发条件所限,浏览器特定的代码,只能在某些生命周期钩子函数

  • Springcloud+Mybatis使用多数据源的四种方式(小结)

    前段时间在做会员中心和中间件系统开发时,多次碰到多数据源配置问题,主要用到分包方式.参数化切换.注解+AOP.动态添加 这四种方式.这里做一下总结,分享下使用心得以及踩过的坑. 分包方式 数据源配置文件 在yml中,配置两个数据源,id分别为master和s1. spring: datasource: master: jdbcUrl: jdbc:mysql://192.168.xxx.xxx:xxxx/db1?......... username: xxx password: xxx drive

  • ThinkPHP中RBAC类的四种用法分析

    本文实例讲述了ThinkPHP中RBAC类的四种用法.分享给大家供大家参考.具体方法如下: 第一类:放在登陆控制器的登陆操作中 1.RBAC::authenticate(); 用于在用户表中查找表单提交的用户名的数据,实质上就是一条用户表查寻语句: 复制代码 代码如下: return M(modle)->where(array)->find(); 这个操作有两个参数 a.array()数组的写法及作用和表查寻数组一样: 复制代码 代码如下: array('字段'=>'值','字段'=&g

  • 详解PHP字符串替换str_replace()函数四种用法

    下面通过本文给大家分享PHP字符串替换str_replace()函数4种用法,具体内容如下所示: mixed str_replace ( mixed $search , mixed $replace , mixed $subject [, int &$count ] ) 该函数返回一个字符串或者数组.该字符串或数组是将subject中全部的search都被replace替换之后的结果. 1.$search,要替换的字符串,或数组 2.$replace,被用来替换的字符串或数组 3.$subjec

  • mysql中模糊查询的四种用法介绍

    下面介绍mysql中模糊查询的四种用法: 1,%:表示任意0个或多个字符.可匹配任意类型和长度的字符,有些情况下若是中文,请使用两个百分号(%%)表示. 比如 SELECT * FROM [user] WHERE u_name LIKE '%三%' 将会把u_name为"张三","张猫三"."三脚猫","唐三藏"等等有"三"的记录全找出来. 另外,如果需要找出u_name中既有"三"又有

  • C# this关键字的四种用法

    C# this关键字的四种用法

    本文实例为大家分享了C# this关键字的四种用法,供大家参考,具体内容如下 用法一  this代表当前实例,用this.显式调用一个类的方法和成员 namespace Demo { public class Test { private string scope = "全局变量"; public string getResult() { string scope = "局部变量"; // 在这里,this代表Test的实例,所以this.scope指向的是全局变量

  • Laravel 实现Controller向blade前台模板赋值的四种方式小结

    如下所示: <?php namespace App\Http\Controllers; use Illuminate\Http\Request; class TestController extends Controller { public function show(){ return view('show',['name'=>'asdfasdfasdfa']); //方法一 是把数组里的键值对赋值过去了,blade模板里用键名来取,如{{$name}} {{$gender}} //方法二

  • 使用python实现回文数的四种方法小结

    回文数就是指整数倒过来和原整数相等. Example 1: Input: 121 Output: true Example 2: Input: -121 Output: false Explanation: From left to right, it reads -121. From right to left, it becomes 121-. Therefore it is not a palindrome. Example 3: Input: 10 Output: false Expla

  • Gradle的缓存路径修改的四种方法(小结)

    方法一,修改gradle.properties文件,增加一句 gradle.user.home=D\:\\Android\\.gradle 但这种方法,需要每个项目文件都要改一遍,如果只是临时修改,可以采用这种方法,如果是针对所有项目的,不建议这种方法. 方法二,在Android Studio中修改gradle用户目录,打开设置(快捷键Ctrl+alt+S),定位到Gradle菜单,作如下设置 但是这个方法现在好像没用,不过可以试试,万一就可以了呢(手动滑稽). 方法三,修改gradle启动脚本

随机推荐