<!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. CCF 交通规划(Dijkstra+优先队列)

    交通规划 问题描述 G国国王来中国参观后,被中国的高速铁路深深的震撼,决定为自己的国家也建设一个高速铁路系统. 建设高速铁路投入非常大,为了节约建设成本,G国国王决定不新建铁路,而是将已有的铁路改造成 ...

  2. hdu2609 How many

    地址:http://acm.hdu.edu.cn/showproblem.php?pid=2609 题目: How many Time Limit: 2000/1000 MS (Java/Others ...

  3. Gym - 101875I I Will Go (dfs序)

    题意:N个人要参加一个局,每个人有自己的好朋友,如果他的好朋友来,他才有可能来.N个人的关系不够成环.Q次查询,问若x来了,y是否肯定来. 分析:若点y是x的祖先,则y肯定回来.一次dfs确定每个点覆 ...

  4. myeclipse自动生成相应对象接收返回值的快捷键

    在你要自动生成返回值对象的那一行的末尾(注意一定要将光标点到最后),按Alt+Shift+L:就可以了.

  5. 前端虚拟接口mockjs的使用

    最近在学习VueJS,也进一步学习了ES6,看了一遍之后,难免手痒,所以想仿写点什么,但是数据是个问题,你总不能写个分页,写个轮播吧,但是在公司做自己的东西找后台要接口也不那么像回事,怎么办呢? 无意 ...

  6. pycharm 小知识

    pycharm使用过程小知识: 1.pycharm定义项目或脚本抬头模版:setting ——Editor——File and Code Templates,右侧选择Python Script: 2. ...

  7. ：Linux 系统日志管理 日志转储

    Linux日志服务器设置 使用“@IP:端口”或“@@IP:端口”的格式可以把日志发送到远程主机上. 假设需要管理几十台服务器,每天的重要工作就是查看这些服务器的日志,可是每台服务器单独登录,并且查看 ...

  8. 手写一款符合Promise/A+规范的Promise

    手写一款符合Promise/A+规范的Promise 长篇预警!有点长,可以选择性观看.如果对Promise源码不是很清楚,还是推荐从头看,相信你认真从头看到尾,并且去实际操作了,肯定会有收获的.主要 ...

  9. 20145331 《Java程序设计》第10周学习总结

    20145331 <Java程序设计>第10周学习总结 教材学习内容总结 网络编程 网络编程就是在两个或两个以上的设备(例如计算机)之间传输数据.程序员所作的事情就是把数据发送到指定的位置 ...

  10. Linux入门之--Linux文件系统结构

    对于每一个Linux学习者来说,了解Linux文件系统的目录结构,是学好Linux的至关重要的一步.,深入了解linux文件目录结构的标准和每个目录的详细功能,对于我们用好linux系统只管重要,下面 ...