<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->

    <script type="text/javascript" src="../js/vue.js"></script>

</head>

<body>

<div id="hdcms">

    <li v-for="(v,k) in comments">

        {{v.id}} - {{v.content}}

        <button v-on:click="remove(k)">删除</button>

    </li>

    <textarea v-model="current_content" cols="30" rows="10"></textarea><br>

    <button v-on:click="push('end')">发表到后面</button>

    <button v-on:click="push('pre')">发表到前面</button>

    <br>

    <button v-on:click="del('last')">删除最后一条评论</button>

    <button v-on:click="del('first')">删除第一条评论</button>

    <br>

    <button v-on:click="sort()">按照编号排序</button>

    <button v-on:click="reverse()">反转顺序</button>

    <br>

    <!--按输入的内容筛选出需要的内容-->

    <input type="text" v-on:keyup.enter="search" v-model="search_content">

    <li v-for="(v,k) in comments">

        {{v.id}} - {{v.content}}

        <button v-on:click="remove(k)">删除</button>

    </li>

</div>

<script>

    var app = new Vue({

        el: '#hdcms',

        data: {

            //搜索内容

            search_content:'',

            //当前用户输入内容

            current_content: '',

            comments: [

                {id: 2, content: 'HDPHP'},

                {id: 4, content: 'HDCMS'},

                {id: 1, content: '后盾人'},

                {id: 3, content: '向军老师'},

            ]

        },

        methods: {

            search(){

                //filter是循环comments里的内容,逐条按下面的规则匹配

                this.comments = this.comments.filter((item)=>{

                    <!--按输入的内容筛选出需要的内容-->

                    console.log(this.search_content);

                    var reg  = new RegExp(this.search_content,'i'); //i不区分大小写

                    return reg.test(item.content); //返回能匹配上的数据

                })

            },

            sort(){

                this.comments.sort(function (a, b) {

                    return a.id > b.id;

                })

            },

            reverse(){

                this.comments.reverse();

            },

            remove(k){

                this.comments.splice(k, 1);

            },

            push(type){

                var id = this.comments.length+1;

                var content = {id:id,content: this.current_content}

                switch (type) {

                    case 'end':

                        this.comments.push(content);

                        break;

                    case 'pre':

                        this.comments.unshift(content);

                        break;

                }

                this.current_content = '';

            },

            del(type){

                switch (type) {

                    case 'last':

                        this.comments.pop();

                        break;

                    case 'first':

                        this.comments.shift();

                        break;

                }

            }

        }

    });

</script>

</body>

</html>

效果:

24.VUE学习之-变异方法filter与regexp实现评论搜索功能的更多相关文章

  1. 20.VUE学习之-变异方法push的留言版实例讲解

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. Vue 变异方法filter和正则RegExp对评论进行搜索

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. Vue列表渲染-变异方法

    Vue 包含一组观察数组的变异方法,变异方法 (mutation method),顾名思义,会改变被这些方法调用的原始数组 所以它们也将会触发视图更新.这些方法如下: push() pop() shi ...

  4. Vue 变异方法sort&reverse对评论进行排序

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. vue数组变异方法

    Vue数组变异方法,会改变被这些方法调用的原始数组,将会触发视图更新 push() 接收任意数量的参数,把它们逐个添加到数组末尾,并返回修改后数组的长度 pop() 从数组末尾移除最后一项,减少数组的 ...

  6. 021——VUE中变异方法 push/unshift pop/shift

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 020——VUE中变异方法push的留言版实例讲解

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. vue学习笔记之：为何data是一个方法

    vue学习笔记之:为何data是一个方法 在vue开发中,我们可以发现,data中的属性值是在function中return出来的.可为何data必须是一个函数呢?我们先看官方的解释: 当一个组件被定 ...

  9. Vue 变异方法splice删除评论功能

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. SpringBoot | 第十五章：基于Postman的RESTful接口测试

    前言 从上一章节开始,接下来的几个章节会讲解一些开发过程中配套工具的使用.俗话说的好,工欲善其事,必先利其器.对于开发人员而言,有个好用的工具,也是一件事半功倍的事,而且开发起来也很爽,效率也会提升很 ...

  2. RPC框架设计思路

    RPC是指远程过程调用 1.要解决通讯的问题,主要是通过在客户端和服务器之间建立TCP连接,远程过程调用的所有交换的数据都在这个连接里传输.连接可以是按需连接,调用结束后就断掉,也可以是长连接,多个远 ...

  3. Spring整合Struts2 XML版

    1.jar包 <!--spring配置--> <dependency> <groupId>org.springframework</groupId> & ...

  4. 关于echarts和jqeury的结合使用问题

    今天在工作上遇到了一个小问题,就是自己在用echarts渲染了一个柱状图,然后点击其他位置,将渲染echart的div进行了清空,这里我所有的echart图形都是在同一个div中渲染的,然后当再次要求 ...

  5. VC使用编译时间作为版本号

    常用方法分两步:1. 得到编译时间:2. 设置基准时间,以编译时间距基准时间的总天数的2倍作为版本号,适当情况还可加上初值: 其中第一步实现有两种方法: 1. 直接使用系统宏:CString OcxT ...

  6. Pylint 是什么

    Pylint 是什么 Pylint 是一个 Python 代码分析工具,它分析 Python 代码中的错误,查找不符合代码风格标准(Pylint 默认使用的代码风格是 PEP 8,具体信息,请参阅参考 ...

  7. C语言——字符串长度的计算方法

    1.不带转义字符的字符串 如:“abc!x=/”,其长度为7 2.带转义字符的字符串 (1) 字符串“abc\n”:其中的'\n'为转义字符(换行符),计算字符串长度时只能计作一个字符,所以该字符串的 ...

  8. win10安装mac系统

    https://baijiahao.baidu.com/s?id=1587241720383991895&wfr=spider&for=pc https://mp.weixin.qq. ...

  9. IOS 进程描述

    ● 什么是进程 ● 进程是指在系统中正在运行的一个应用程序 ● 每个进程之间是独立的,每个进程均运行在其专用且受保护的内存空间内 ● 通过“活动监视器”可以查看Mac系统中所开启的进程

  10. innobackupex备份脚本

    #!/bin/bash # 10 23 * * * /bin/bash /data/script/backup.sh BDATE=`date +%Y%m%d%H%M%S`BPATH=/data/bac ...