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> ...
随机推荐
- django实现多种支付、并发订单处理
django实现多种支付方式 ''' #思路 我们希望,通过插拔的方式来实现多方式登录,比如新增一种支付方式,那么只要在项目中新增一个py文件,导入里面的pay方法就可以了,这样在支付业务中支付语句是 ...
- Java面试题的个人总结
面试总结 第一轮:电话初面 第二轮:技能面谈[技能职位尽量避免多谈处理上的作业] 第三轮:高管复试 第四轮:HR终究供认 一面:首要供认对阿里的意向度(假定异地更会考虑对作业地址(杭州)的意向度!阿里 ...
- 【PAT甲级】Public Bike Management 题解
题目描述 There is a public bike service in Hangzhou City which provides great convenience to the tourist ...
- Java连载42-this不能省略的情况、构造方法设置默认值的方法
一. this什么时候是不能省略的,我们举个例子来说明 class User2{ private int id; public int getId() { return id; } public vo ...
- 大话设计模式Python实现-中介者模式
中介者模式(Mediator Pattern):用一个对象来封装一系列的对象交互,中介者使各对象不需要显示地相互引用,从而使耦合松散,而且可以独立地改变它们之间的交互. 下面是一个中介者模式的demo ...
- IT兄弟连 Java语法教程 位运算符
Java定义了几个位运算符,它们都可以用于整数类型(long.int.short.byte以及char).这些运算符对操作数的单个位进行操作.表1 对位运算符进行了总结. 表1 位运算符 由于位运算 ...
- selenium常用的三种等待方式
一.强制等待 使用方法:sleep(X),等待X秒后,进行下一步操作. 第一种也是使用最简单的一种办法就是强制等待sleep(X),强制让浏览器等待X秒,不管当前操作是否完成,是否可以进行下一步操作, ...
- javascript刷新当前页面的几种方式
这里总结一下JavaScript刷新当前页面的几种方式. 1.history对象. history.go(0); 2.location对象. location.reload(); location = ...
- 【linux】linux命令lsof和grep命令的配合使用---linux根据端口查看PID,根据PID关键字高亮显示
lsof命令,根据端口,查看进程PID lsof -i: ps命令+grep命令 --color参数,根据PID查看进程详情,高亮显示关键字 ps -ef | grep --color=always
- Json互相序列化对象
using System.ServiceModel; using System.ServiceModel.Web; using System.Runtime.Serialization.Json; u ...