<!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. HDU - 5592 ZYB's Premutation (权值线段树)

    题意:给出序列前k项中的逆序对数,构造出这个序列. 分析:使用权值线段树来确定序列元素. 逆序对的数量肯定是递增的,从最后一个元素开始逆向统计,则\(a[i] - a[i-1]\)即位置i之前比位置i ...

  2. Android如何定制一个下拉刷新，上滑加载更多的容器

    前言 下拉刷新和上滑加载更多,是一种比较常用的列表数据交互方式. android提供了原生的下拉刷新容器 SwipeRefreshLayout,可惜样式不能定制. 于是打算自己实现一个专用的.但是下拉 ...

  3. cocos2d-x 2.x.x 新建工程 android下的 org文件夹丢失

    cocos2d-x 2.x.x 新建工程之后... 打开android项目..会发现src下没有org文件... 解决方法一: cocos2d-x-2.2.0\cocos2dx\platform\an ...

  4. JVM内存区域划分Eden Space\Survivor Space\Tenured Gen\Perm Gen

    JVM区域分heap区和非heap区. 1)heap区:Eden Space(伊甸园),Survivor Space(幸存者区),Tenured Gen(老年代-养老区). 2)非heap区:Code ...

  5. c++之旅:类型的强制转换

    类型强制转换 在编程的时候我们经常遇到类型的强制转换,C++为此提供了更安全的转换方式,在编程中我们更多的应该采用C++提供的类型转换方式 基本类型转换 基本类型转换用的最多,一般将高精度转换为低精度 ...

  6. centos7防火墙的简单配置介绍

    centos7版本 1.查看已开放的端口(默认不开放任何端口) firewall-cmd --list-ports 2.开启80端口 firewall-cmd --zone=public(作用域) - ...

  7. lastIndexOf is not a function

    最近在开发的时候遇到了这个问题lastIndexOf is not a function,细心调试发现我传递进去的参数不是字符串类型,而且object类型,导致出现这种错误.把参数修改成字符串传递进去 ...

  8. Storm完整例子

    import backtype.storm.spout.SpoutOutputCollector; import backtype.storm.task.TopologyContext; import ...

  9. 此博客可能不再更新，往后博文将发布在 GitHub 中

    在 GitHub 上, 可以建立不同的仓库,显示分类可以更明确: 有不同分支,可以打很多次草稿: 用 markdown 语法来书写比较舒服(博客园也可以设置): 最主要的是 GitHub 装逼呀!!! ...

  10. excel日期插件

    效果图 Private Sub DTPicker1_Click() ActiveCell.Value = DTPicker1.Value DTPicker1.Visible = False End S ...