24.vue学习之-变异方法filter与regexp实现评论搜索功能(代码片段)

haima haima     2023-02-19     314

关键词:

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

效果:

技术分享图片

struts2学习之二(受管理bean得到request与response对象)

Struts2学习之二(受管理BEAN得到REQUEST与RESPONSE对象)有两种方法:1,IOC方式:实现ServletRequestAware与ServletResponseAware接口。2,非IOC方式:ServletActionContext.getRequest()等静态方法。 publicclassHelloActionReqAndResimplementsServle 查看详情

java学习之inputstream中read()与read(byte[]b)

Java学习之InputStream中read()与read(byte[]b)  这两个方法在抽象类InputStream中都是作为抽象方法存在的,       JDKAPI中是这样描述两者的: read():  从输入流中读取数据的下一个字节,返回0到2... 查看详情

jquery学习之各种效果演示

1.隐藏与显示:hide()和show(),toggle()**隐藏:$("#hide").click(function(){  $("p").hide();});**显示:$("#show").click(function(){  #("p").show();});**切换:toggle()方法来切换hide()和show()方法$("button").click(function(){  $( 查看详情

jquery学习之各种效果演示

1.隐藏与显示:hide()和show(),toggle()**隐藏:$("#hide").click(function(){  $("p").hide();});**显示:$("#show").click(function(){  #("p").show();});**切换:toggle()方法来切换hide()和show()方法$("button").click(function(){  $( 查看详情

编程学习之简单工厂模式与策略模式

很久之前在学习c++的时候就听到老师说写代码要考虑重构,架构,在此期间学习到了一种简单工厂模式。何为简单工厂模式呢?简单工厂模式又叫静态工厂方法模式(StaticFactoryMethodPattern),是通过专门定义一个类来负责创... 查看详情

react学习之设置css样式篇

react中设置css样式方法一:行内样式:使用{{ }},与正常jsx中插入js代码不一样,这里需要两个括号。<divstyle={{float:‘right‘,}}>{this.renderButton()}</div>样式比较多的话不建议使用该方法。可以使用方法二方法二:在jsx文... 查看详情

eigen学习之简单线性方程与矩阵分解(代码片段)

  Eigen提供了解线性方程的计算方法,包括LU分解法,QR分解法,SVD(奇异值分解)、特征值分解等。对于一般形式如下的线性系统:          解决上述方程的方式一般是将矩阵A进行分解,当然最基本的方法是高... 查看详情

java线程学习之wait方法(代码片段)

wait等待方法是让线程进入等待队列,使用方法是obj.wait();这样当前线程就会暂停运行,并且进入obj的等待队列中,称作“线程正在obj上等待”。如果线程想执行wait方法,线程必须拥有锁。如果线程进入等待队列,就会释放... 查看详情

机器学习之数据清洗与特征提取

欢迎大家前往腾讯云社区,获取更多腾讯海量技术实践干货哦~作者:汪毅雄导语:本文详细的解释了机器学习中,经常会用到数据清洗与特征提取的方法PCA,从理论、数据、代码三个层次予以分析。 机器学习,这个名词大... 查看详情

juc学习之java线程常用方法(代码片段)

JUC学习之Java线程常用方法Java线程方法一,直接使用Thread方法二,使用Runnable配合ThreadJava8以后可以使用lambda精简代码原理之Thread与Runnable的关系方法三,FutureTask配合Thread查看进程线程的方法windowsJavalinuxjconsole远程监控... 查看详情

机器学习之深度学习常用的模型和方法

DeepLearning的常用模型或者方法AutoEncoder自动编码器       DeepLearning最简单的一种方法是利用人工神经网络的特点,人工神经网络(ANN)本身就是具有层次结构的系统,如果给定一个神经网络,我们假设其... 查看详情

深度学习之二:神经网络的实践与优化

本文内容为Andrewng深度学习课程的第二部分的笔记,本篇总结了如何神经网络的训练和学习过程的实践经验与优化方法。1深度学习的实践技巧应用机器学习是一个需要不断迭代的过程,众多经验参数如层数,隐层单元... 查看详情

jquery学习之ajax应用

1.AJAX=异步javaScript和XML:在不重载整个网页的情况下,AJAX通过后台加载数据,并在网页上进行显示 2.load():简单但强大的AJAX方法,load()方法从服务器加载数据,并把返回的数据放入被选元中;语法:$(selector).load(URL,data,callback)... 查看详情

《学习之道》第六章学习方法23

  练习与小恶魔较劲  你是不是喜欢早上一起床先查查电子邮件,逛逛weibo?你可以改变一下,先定时工作10分钟,然后奖励自己上会儿网。让你惊讶的是,这个自我控制的小练习将你的一整天都充满对抗小恶魔的力量。 ... 查看详情

深度学习之目标检测(代码片段)

算法的设计往往与名字有着绝对的关联性,目标定位检测即目标定位+检测。在深度学习中比较常用的目标定位检测方法有RCNN系列方法和YOLO系列方法。其中RCNN系列方法的定位过程和检测过程是分开的,即先定位目标&#x... 查看详情

es6学习之reflect

Reflect对象与Proxy对象一样,也是ES6为了操作对象而提供的新APIReflect设计目的:将Object对象的一些明显属于语言内部的方法(比如Object.defineProperty),放到Reflect对象上。修改某些Object方法的返回结果,让其变得更合理。比如,Obje... 查看详情

机器学习之决策树与随机森林模型

欢迎大家前往腾讯云技术社区,获取更多腾讯海量技术实践干货哦~作者:汪毅雄 导语 本文用容易理解的语言和例子来解释了决策树三种常见的算法及其优劣、随机森林的含义,相信能帮助初学者真正地理解相关知识。... 查看详情

机器学习之聚类

公式实在不好敲呀,我拍了我笔记上的公式部分。原谅自己小学生的字体(太丑了)。 聚类属于无监督学习方法,典型的无监督学习方法还有密度估计和异常检测。聚类任务:将数据集中的样本划分为若干个不相交的子集,... 查看详情