<!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 1056

    解法一:简单搜索肯定TLE,只是单纯的想写一发搜索练练手 #include<cstdio> #include<cstring> #define maxn 1005 using ...

  2. ruby中的链式访问和方法嵌套

    先看一道题,这道题是codewars上的一道题,我很早就看到了,但是不会写.等到又看到这道题的时候,我刚看完元编程那本书,觉得是可以搞定它的时候了.废话不多说,先看这道题,题目最开始是为JavaScr ...

  3. 4-es6的模块化编程

    诞生背景其他都是第三方库,只有es才是官方正宗的,如果es早就制定的话,也不至于现在的这么百花齐放(混乱)的局面了 核心规范一个文件就是一个模块export是暴露出模块的公开方法import是导入 实 ...

  4. 自从教学弟学会了Python，他每天都爬一些好不正经的图片！

    学弟他作为一个宅男,闲着没事就喜欢用我教他的Python来爬一些 “资源” 套图欣赏,我每次都骂他你总是这样找个女朋友不好点,他不以为然,依旧如故.气的我只好把他写的东西发出来让更多的人来谴责他! 我 ...

  5. java 2017/6/26杂记

    mkdirs()可以建立多级文件夹, mkdir()只会建立一级的文件夹, 如下: new File("/tmp/one/two/three").mkdirs(); 执行后, 会建 ...

  6. PHP jsonencode 已经json中包含 汉字的处理

    <?php $arr = array ( 'Name'=>'希亚', ); $jsonencode = json_encode($arr); echo $jsonencode; ?> ...

  7. 组播的介绍以及CS模型实现

    1.组播介绍 组播组可以是永久的也可以是临时的.组播组地址中,有一部分由官方分配的,称为永久组播组. 永久组播组保持不变的是它的ip地址,组中的成员构成可以发生变化.永久组播组中成员的数量都可以是任意 ...

  8. 使用tcpdump 对nginx的access.log 非400的ip进行自动抓包

    #抓取nginx access日志不是 400 的行,找出该ip ,并且启动抓包 #该脚本的执行要放在 crond 里面或者 while循环里面 ################## #网卡名称 ne ...

  9. Xcode Missing file的解决方案

    因为没在工程里面删除文件,导致Xcode报了一大堆警告,都是Missing file的警告,研究了一下,下面是我的解决方案: Missing file出现的原因 原因就是你在文件里面删除了文件,但是在 ...

  10. JAVA基础补漏--List

    Arraylist 通过对ArrayList的源码的查看,他的底层实现是对数组进行数据的操作,所以他的数据特点同数组. 查询快,因为他的内存区域为一个整块,可直接根据索引进行查询. 增删慢,因为每次增 ...