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> ...
随机推荐
- Python学习记录：括号配对检测问题
Python学习记录:括号配对检测问题 一.问题描述 在练习Python程序题的时候,我遇到了括号配对检测问题. 问题描述:提示用户输入一行字符串,其中可能包括小括号 (),请检查小括号是否配对正确, ...
- STL pair类型的介绍
pair标准库类型它定义在头文件utility中. 一个pair保存两个数据成员.类似容器,pair是一个用来生成特定类型的模板.当创建一个pair时,我们必须提供两个类型名,pair的数据成员将具有 ...
- IDEA springboot配置
基于springboot2.1.7 springboot项目创建 springboot热部署 springboot配置swagger2 springboot配置mybatis springboot配置 ...
- nacos 的服务注册与发现
nacos的服务注册于发现. 这个要求服务统一注册到注册中心,然后调用的时候就不需要通过ip来调用,直接通过服务名即可. 服务提供者 pom.xml配置,需要spring-cloud-starter- ...
- 深入Pytorch微分传参
导数 这段代码揭示了多个变量的微分以及如何求解loss为向量的导数 m1 = Variable(torch.ones((3,2)), requires_grad=True) m2 = Variable ...
- php time() 和 $_SERVER['REQUEST_TIME']
time() 和 $_SERVER['REQUEST_TIME']效率 结果:(其中之一) 结论: time() : 执行时间在0.10 - 0.30 之间 $_SERVER['REQUEST_TIM ...
- python接口自动化9-ddt数据驱动
前言 ddt:数据驱动,说的简单一点,就是多组测试数据,比如点点点的时候登录输入正常.异常的数据进行登录. 实际项目中,自动化测试用得很少,但也有人用excel来维护测试数据 一.ddt 1.安装:p ...
- 学习 正则表达式 js java c# python 通用
正则表达式 js java c# python 学习网站 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Globa ...
- win7和win10自带桌面便签哪里找
一些小伙伴习惯使用windows自带的便签功能,但win7和win10区别较大, 导致更新系统后不知道在哪里找,甚至以为没有该功能了, 其实不然,下面我总结了2种方法,希望能帮到有需要的人 win7( ...
- sql server 随记 -- 月份/日期 查询
月份 SELECT * FROM ( ] ) a UNPIVOT ( xxx ]) ) a2; 日期 SELECT * FROM ( ] )a UNPIVOT( xxx ]) )a2 (存档)