Vue 变异方法filter和正则RegExp对评论进行搜索
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="vue.js"></script>
<title id="title">{{title}}</title>
</head>
<body>
<div id="ask"><!--vue不能控制body和html的标签-->
<ul>
<li v-for="(v,k) in list">
{{v.id}} ===== {{v.content}}<button v-on:click="remove(k)">删除</button>
</li>
</ul>
<textarea v-model="content" cols="30" rows="10"></textarea> <button v-on:click="push('pre')">发表到前面</button>
<button v-on:click="push('end')">发表到后面</button> <button v-on:click="del('first')">删除第一条</button>
<button v-on:click="del('last')">删除最后一条</button> <button v-on:click="sort">排序</button>
<button v-on:click="reverse">反转</button> <input type="text" v-on:keyup.enter="search" v-model="search_content"><!--绑定键盘回车事件-->
</div>
<script>
var vue = function (options){new Vue(options)};
vue({
el:'#title',
data:{
title:'Vue 变异方法filter和正则RegExp对评论进行搜索'
}
});
var app = vue({
el:'#ask',
data:{
search_content:'',
content:'',
list:[
{'id':3,'content':'hello'},
{'id':5,'content':'简单记录'},
{'id':2,'content':'个人博客'},
{'id':1,'content':'学习笔记'},
{'id':4,'content':'想学什么学什么 '}
]
},
methods:{
search(){
this.list = this.list.filter((item)=>{
console.log(this.search_content);
var reg = new RegExp(this.search_content,'i');/*创建正则*/
return reg.test(item.content);
})
},
reverse(){
return this.list.reverse();
},
sort(){
this.list.sort(function (a,b) {
return a.id>b.id;
})
},
remove(k){
this.list.splice(k,1)
},
push(type){
var id = this.list.length+1;
var content_push = {id:id,'content':this.content};
switch (type) {
case 'pre':
this.list.unshift(content_push);
break;
case "end":
this.list.push(content_push);
break;
}
this.content='';
},
del(type){
switch (type) {
case 'first':
this.list.shift();
break;
case "last":
this.list.pop();
break;
}
}
}
}); </script>
</body>
</html>
Vue 变异方法filter和正则RegExp对评论进行搜索的更多相关文章
- Vue 变异方法sort&reverse对评论进行排序
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue 变异方法splice删除评论功能
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue 变异方法unshift&pop&shift
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue 变异方法Push的留言板实例
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 24.VUE学习之-变异方法filter与regexp实现评论搜索功能
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue变异方法
push() 往数组最后面添加一个元素,成功返回当前数组的长度 pop() 删除数组的最后一个元素,成功返回删除元素的值 shift() 删除数组的第一个元素,成功返回删除元素的值u ...
- vue数组变异方法
Vue数组变异方法,会改变被这些方法调用的原始数组,将会触发视图更新 push() 接收任意数量的参数,把它们逐个添加到数组末尾,并返回修改后数组的长度 pop() 从数组末尾移除最后一项,减少数组的 ...
- 021——VUE中变异方法 push/unshift pop/shift
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 020——VUE中变异方法push的留言版实例讲解
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
随机推荐
- Maven为项目配置仓库
Maven为项目配置仓库 参考 https://mp.weixin.qq.com/s?__biz=MzA5MTkxMDQ4MQ==&mid=2648933541&idx=1&s ...
- python爬虫初认识
一.爬虫是什么? 如果我们把互联网比作一张大的蜘蛛网,数据便是存放于蜘蛛网的各个节点,而爬虫就是一只小蜘蛛, 沿着网络抓取自己的猎物(数据)爬虫指的是:向网站发起请求,获取资源后分析并提取有用数据的程 ...
- Python 生成器 (generator) & 迭代器 (iterator)
python 生成器 & 迭代器 生成器 (generator) 列表生成式 列表生成式用来生成一个列表,虽然写的是表达式,但是储存的是计算出来的结果,因此生成的列表受到内存大小的限制 示例: ...
- Repair Microsoft.VisualStudio.MinShell.Msi.Resources 2203 error And visual studio 2019 key
1. Go to the properties of "My computer" 2. Go to advanced settings of the system 3. Go to ...
- SpringMVC拦截器和数据校验
1.什么是拦截器 Spring MVC中的拦截器(Interceptor)类似于Servlet中的过滤器(Filter),它主要用于拦截用户请求并作相应的处理.例如通过拦截器可以进行权限验证.记录请求 ...
- 实用小工具：VNC的安装
安装xen时,需要使用vnc工具来进行图形化安装,安装好后启动失败,试了很多办法,最终解决. 1.使用yum安装:yum install tigervnc-server tigervnc-server ...
- HashMap框架源码深入解读，面试不用愁
在Java Collections Framework的体系中中,主要有两个重要的接口,一个是List.Set和Queue所属的Collection,还有一个就是Map接口了.在上一篇文章中介绍了Li ...
- String trim() ,去除当前字符串两边的空白字符
package seday01;/** * String trim() * 去除当前字符串两边的空白字符 * @author xingsir */public class TrimDemo { pub ...
- 测试工程师技术tree（“自言自语”）
理论部分 1.测试分为哪几个阶段 2.测试的流程是什么 3.如何做好测试计划 4.常见的测试用例设计方法有哪些 5.一条bug记录包含哪些内容 5.如何分层自动化测试 6.如何保证脚本的有效性 7.如 ...
- 本地Yum源配置
一.网络源 yum list 软件名称 查找源里的软件,可以使用通配符 二.配置源 源配置文件路径 /etc/yum.repos.d/ 配置项 [名称] 源标识(不能和其他的源重复) name=名称 ...