<!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. 下拉刷新&上拉加载

    效果演示 核心codehtml <ion-view view-title="学生list"> <ion-content > <ion-refreshe ...

  2. 【PS技巧】创建2D对象的描边阴影

    在本场景中,怪物死亡掉落宝袋.所以在玩家眼里,宝袋是掉落在场景里,而不是像其他界面的UI元素,悬浮在场景上的. 所以,我们需要给宝袋添加阴影,增加它与场景之间的视觉过渡,比较简单的办法是使用阴影,正如 ...

  3. 【转】js获取当前日期时间“yyyy-MM-dd HH:MM:SS”

    获取当前的日期时间 格式“yyyy-MM-dd HH:MM:SS”   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 function getNowFormatD ...

  4. Mysql中间件_haproxy在启动过程中报错_Starting proxy : cannot bind socket

    在搭建好haproxy准备启动中,使用service命令的方式启动没有报任何错误,但是监听服务发现并没有想象的顺利,搜索各种帖子,参考对照发现,发现一条新的命令,^_^,试着用下面命令启动,惊喜~发现 ...

  5. presto + slider 提交计算至yarn

    10.112.28.240 prestocli 10.183.225.158 perstoser hive-site.xml useUnicode=true&characterEncoding ...

  6. # PHP学习笔记之一

    PHP学习笔记之一 标签(空格分隔): PHP 资料来源:慕课网PHP入门篇.PHP学习手册 一.变量 变量定义 $变量名 = 变量值; $var = "xxx"; 变量类型查看 ...

  7. linux下tar的使用方法

    1.仅打包 tar -cvf hello.tar hello (输出文件大小为10240) 2.打包后压缩成gzip压缩格式 tar -czvf hello.tar.gz hello (输出文件大小为 ...

  8. uboot下ext4load的用法

    将sd卡的某个分区下的某个目录里的某个文件加载到内存的某个地址,示例如下: ext4load mmc 0:1 0xa0000000 /bin/vi

  9. com.mysql.jdbc.MysqlDataTruncation:Data Truncation:Data too long for column '字段name' at row 1

    1.问题描述: 在mysql插入数据的时候报错:Cause: com.mysql.jdbc.MysqlDataTruncation: Data truncation: Data too long fo ...

  10. python正则表达式 Python Re模块

    最近在学python 练习的时候随手写的,方便以后自己参考~如果能对其他同学有所帮助就再好不过了 希望大家指正哦~  我会随时整理的,先这样~ 正则表达式 1.元字符([ ]),它用来指定一个char ...