24.VUE学习之-变异方法filter与regexp实现评论搜索功能

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

效果:

原文地址:https://www.cnblogs.com/haima/p/10237429.html

时间: 2024-10-14 15:59:34

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

【Vue学习笔记】问题及解决方法记录

1.父组件传递 props 到子组件过程中,报错或者没有值. 参考链接:http://www.jb51.net/article/117447.htm 2.vue工程项目中style设置background-image路径问题: 使用 <li v-for="img in imgs" :key="img.id" class="" :style="'background-image:url('+ img +')'">&l

vue学习笔记のtodolist的实现

借助微信群友及腾讯课堂的力量,对vue有了初步的了解,通过数据直接影响视图.通过vue实现todolist任务来巩固相关知识点.Todolist需要实现的主要功能有:任务的添加,回车添加(v-model.v-on).删除(v-on).选定重编辑(@dblclick)及取消重编辑(按esc).对已完成任务.未完成任务及所有任务的列表切换显示(computed.v-show.v-if.v-bind.v-for.active).存取数据(localStorage.watch). 添加任务: 在<inp

外语学习的真实方法及误区

目录 前言 1. 对外语学习的主要误区 2. 造成“哑巴英语”的最主要原因 3. 英语环境的问题 4. 特殊群体 5. 语言关键期之争 6. 语言条件反射 7. 关于记忆力 8. 中国“英”雄 9. 二律背反? 10. 世纪之战 11.“学得”-“获得”之辩 12. 克氏理论 实践篇 第一阶段.早期(Early Stage) 1. 看图识音 2. 全身反应法(Total Physical Response) 第二阶段.提高期(Upping the Ante) 1. 听力内容设计 2. 纽约人在北

Vue学习笔记进阶篇——列表过渡及其他

本文为转载,原文:Vue学习笔记进阶篇--列表过渡及其他本文将介绍Vue中的列表过渡,动态过渡, 以及可复用过渡是实现. 列表过渡 目前为止,关于过渡我们已经讲到: 单个节点 同一时间渲染多个节点中的一个 那么怎么同时渲染整个列表,比如使用 v-for ?在这种场景中,使用 <transition-group>组件.在我们深入例子之前,先了解关于这个组件的几个特点: 不同于 <transition>, 它会以一个真实元素呈现:默认为一个<span>.你也可以通过 tag

英语:漏屋-英语学习的真实方法及误区分析(转)

前 言 著名语言学家Greg Thomson说的:“外语学习的原理是如此之复杂,以至于没有人能说清楚:但掌握语言的过程又是如此之简单,以至于不需要说清楚.”讨论语言学习的原 理,是件非常复杂的事,在下当然也没把握能描述得很清楚.而且因为外语学习就连学术界都存在很多尖锐的争论,本人也不敢说自己有把握能把争论化解.但还是 决定先从简单入手,做些抛砖引玉的工作吧,探讨一下外语学习的真谛,特别是对大家在外语学习上普遍存在的误解进行分析和澄清,希望能对外语学习者有所帮 助,对外语教学工作着有所启发,就知足

后端开发者的Vue学习之路(二)

目录 上篇内容回顾: 数据绑定 表单输入框绑定 单行文本输入框 多行文本输入框 复选框checkbox 单选框radio 选择框select 数据绑定的修饰符 .lazy .number .trim 样式绑定 class绑定 对象语法: 数组语法: style绑定 对象语法: 数组语法: 补充: 事件 绑定事件 事件修饰符 按键修饰符 事件绑定的简写 补充: Vue指令 数组操作 官网的话 补充: Vue的元素复用问题 数据残留问题 问题的解决: 首发日期:2019-01-20 上篇内容回顾:

vue数组和对象方法

变异方法:会改变原始数组 push() pop() shift() unshift() splice() sort() reverse() 非变异方法:不会改变原始数组,但是会返回一个新数组 fliter() slice() concat() vue不能检测变动的数组 利用索引值直接设置内容时 vm.items[indexOfItem] = newValue: 修改数组的长度时 vm.items.length = newLength: //这种写法并不能实时检测到变化 var vm = new

Vue学习手记01-安装和项目创建

1.安装Vue  注:node版本必须大于等于8.9  vue-cli3.x:npm install -g @vue/cli  vue-cli2.x:npm install -g @vue/cli-init 2.创建项目  vue init webpack my-project  注:安装依赖的时候,选择最后一个,就是自己安装,检验和路由初学者一般不安装,后面学习的时候再安装到项目  cd my-project  npm start/npm run dev 3.工程目录说明 . ├── buil

Vue学习笔记入门篇——组件的内容分发(slot)

本文为转载,原文:Vue学习笔记入门篇--组件的内容分发(slot) 介绍 为了让组件可以组合,我们需要一种方式来混合父组件的内容与子组件自己的模板.这个过程被称为 内容分发 (或 "transclusion" 如果你熟悉 Angular).Vue.js 实现了一个内容分发 API,使用特殊的 'slot' 元素作为原始内容的插槽. 编译作用域 在深入内容分发 API 之前,我们先明确内容在哪个作用域里编译.假定模板为: <child-component> {{ messa