<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>VUE中filter的使用</title>

    <script src="vue.js"></script>

</head>

<body>

<div id="lantian">

    <ul v-for="v in news">

        <li>{{v.cont}}</li>

    </ul>

    <input type="text" v-on:keyup.enter="search" v-model="searchCon">

</div>

<script>

    var app = new Vue({

        el: '#lantian',

        data: {

            searchCon:'',

            news: [

                {'id': 5, 'cont': 'HD测试五'},

                {'id': 1, 'cont': '测hd试一'},

                {'id': 4, 'cont': '测试四'},

                {'id': 3, 'cont': '测试Hd三'},

                {'id': 2, 'cont': '测试二'}

            ]

        },

        methods: {

            search:function () {

                this.news=this.news.filter((item)=>{

                    var reg=new RegExp(this.searchCon,'i');

                    return reg.test(item.cont);

                });

            }

        }

    });

</script>

</body>

</html>

　　

024——VUE中filter的使用的更多相关文章

  1. vue中filter的用法

    test() { var arr1 = ["A", "B", "C","C","A"]; var r ...

  2. vuex中filter的使用 && 快速判断一个数是否在一个数组中

    vue中filter的使用 computed: mapState({ items: state => state.items.filter(function (value, index, arr ...

  3. vue中自定义指令vue.direvtive，自定义过滤器vue.filter(),vue过渡transition

    自定义指令 默认设置的核心指令( v-model,v-bind,v-for,v-if,v-on等 ),Vue 也允许注册自定义指令.注意,在 Vue2.0 里面,代码复用的主要形式和抽象是组件——然而 ...

  4. vue 中全局filter过滤器的配置及使用

    在项目中使用到的经常用到过滤器,比如时间,数据截取等过滤器,如果在每个.vue中都可以复制同一个过滤器,这可以达到目的,但是遇到方法有bug时就需要诸葛修改进入不同的页面修改,这样既费时又费力,优先可 ...

  5. vue中的重要特性

    一.vue中的自定义组件 html的代码: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  6. vue中在页面渲染完之后获取元素（否则动态渲染的元素获取不到）

    两种方法: 方法一: 使用$nextTick,在异步获得数据之后再获取元素: 方法二: 在then之后再获取该元素: 问题2:vue中监听改变数组的方法: let idx =; this.listIn ...

  7. vue中修改了数据但视图无法更新的情况[转载]

    我们有时候常碰到vue中明明修改了数据,但是视图无法更新,因此我总结了一点点碰到此类的情况: 1.v-for遍历的数组,当数组内容使用的是arr[0].xx =xx更改数据,vue无法监测到 数组数据 ...

  8. vue中excel导入导出组件

    vue中导入导出excel,并根据后台返回类型进行判断,导入到数据库中 功能:实现js导入导出excel,并且对导入的excel进行展示,当excel标题名称和数据库的名称标题匹配时,则对应列导入的数 ...

  9. Vue中计算属性、侦听、过滤、自定义指令、ref的操作

    1.计算属性 <div id="app"> <input type="text" v-model="x"> < ...

随机推荐

  1. IOS系统推送原理

    IOS推送大致原理如下图 1.Provider:就是为指定IOS设备应用程序提供Push的服务器,(如果IOS设备的应用程序是客户端的话,那么Provider可以理解为服务端[消息的发起者]): 2. ...

  2. shell 脚本中双引号 单引号 反引号 的区别

    转自:http://blog.csdn.net/iamlaosong/article/details/54728393 最近要编个shell脚本处理数据,需要检测数据文件是否存在,文件名中包含日期,所 ...

  3. 【MSDN_C#】C#版本介绍

    C# 1,Visual Studio .NET 2002 首次发布 C# 1.1,Visual Studio .NET 2003 #line 杂注和 xml 文档注释 C# 2,Visual Stud ...

  4. SQL学习笔记之简易ORM

    0x00 前言 1 .我在实例化一个user对象的时候,可以user=User(name='lqz',password='123') 2 .也可以 user=User() user['name']=' ...

  5. RabbitMQ的安装及集群搭建方法

    RabbitMQ安装 1 安装erlang 下载地址:http://www.erlang.org/downloads 博主这里采用的是otp_src_19.1.tar.gz (200MB+) [roo ...

  6. 20145328 《Java程序设计》第6周学习总结

    20145328 <Java程序设计>第6周学习总结 教材学习内容总结 输入/输出 InputStream与OutputStream 从应用程序角度来看,如果要将数据从来源取出,可以使用输 ...

  7. 学Git，用Git ③

    不知道我前面是否将git讲清楚了,这里再稍微总结一下git的一个重要功能用法,同时增加两个很实用的git使用技巧. 1.git"读档"与git"回退" 我发现我 ...

  8. [BZOJ]BST again

    Description 求有多少棵大小为n的深度为h的二叉树.(树根深度为0:左右子树有别:答案对1000000007取模) Input 第一行一个整数T,表示数据组数. 以下T行,每行2个整数n和h ...

  9. 关于Bonobo Git Server的安装

    1.关于安装 参考官网:https://bonobogitserver.com/ 实际上就是在IIS上搭建一个MVC程序.安装教程:https://bonobogitserver.com/instal ...

  10. Jenkins Pipeline shell脚本用svn_revision当做系统版本号

    1. 使用dir命令,进入发布目录,版本号所在文件夹. 2. 使用sed命令 修改替换版本号,这里使用vvvv作为要替换的版本号. 3. 最后一步可以不加.只是方便查看效果. stage(" ...