<!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. XDU 1011

    解法1:TLE #include<stdio.h> int main() { long long n; //freopen("in.txt","r" ...

  2. 阿里云搭建go开发环境

    开通了一个阿里云来玩,记录一下环境搭建的过程 运行环境 ECS Ubuntu 16.04 64位 过程 #切换到安装文件夹 cd /usr/local #下载go #由于墙的原因,直接下载官方的可能会 ...

  3. Http协议面试题

    1.说一下什么是Http协议? 对器客户端和 服务器端之间数据传输的格式规范,格式简称为“超文本传输协议”. 2.什么是Http协议无状态协议?怎么解决Http协议无状态协议?(曾经去某创业公司问到) ...

  4. 一个简单的ssm项目

    准备说明jdk.tomcat.idea.mave配置请看我前两篇,这里说下mysql以及我的mysql图像化工具 数据库 项目概览 项目构建--------搭建一个简单的mave的web项目,构建步骤 ...

  5. JavaWeb 如何在web.xml中配置多个servlet

    15:34:42 <servlet> <description></description> <display-name>ListMusicServle ...

  6. Java设计模式之模板方法模式（Template Method）

    一.含义 定义一个算法中的操作框架,而将一些步骤延迟到子类中.使得子类可以不改变算法的结构即可重定义该算法的某些特定步骤,不同的子类可以以不同的方式实现这些抽象方法,从而对剩余的逻辑有不同的实现. 二 ...

  7. tomcat源码调试

    三.tomcat目录结构 tomcat的下载安装有很多教程,不再赘述. 现在的tomcat已经到9了,当tomcat下载安装完成后,其目录大致如下:     除了上面的文件夹,还有四个文件:     ...

  8. CentOS下yum安装FFmpeg

    一.yum安装FFmpeg 1.    最偷懒的方式就是yum安装了,自动解决依赖.不过CentOS系统默认无FFmpeg源,企业版 Linux 附加软件包EPEL源也不包含,需要手动添加yum源配置 ...

  9. Learning Phrase Representations using RNN Encoder–Decoder for Statistical Machine Translation

    1.主要完成的任务是能够将英文转译为法文,使用了一个encoder-decoder模型,在encoder的RNN模型中是将序列转化为一个向量.在decoder中是将向量转化为输出序列,使用encode ...

  10. 20145103《JAVA程序设计》课程总结

    每周读书笔记链接汇总 假期笔记 http://www.cnblogs.com/20145103fwh/p/5248170.html 第一周读书笔记 http://www.cnblogs.com/201 ...