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> ...
随机推荐
- Go 字符串 (string)
字符串类型为 string,使用双引号或者反引号包起来 字符串形式 反引号 当使用反引号时不会对字符串进行转义,并可以包含多行文本 示例: package main import "fmt& ...
- VScode保持vue语法高亮的方式
VScode保持vue语法高亮的方式: 1.安装插件:vetur.打开VScode,Ctrl + P 然后输入 ext install vetur 然后回车点安装即可. 2.在 VSCode中使用 C ...
- Linux Ubuntu 16.04 安装步骤+远程环境
简介 Ubantu 16.04 系统是一款比较稳定的linux系统,适合用户使用以及针对一些兼容性的服务搭建. 这里我推荐安装桌面版,用于方便使用. 准备工作 1.准备1个U盘空间5G以上 2.需下载 ...
- 黄聪：PHP转换网址相对路径到绝对路径的一种方法
相信很多程序(尤其是采集类的程序)都会有需要把网址的相对路径转换成绝对路径的需要,例如采集到某页面的HTML代码中包含资源文件经常会看到这样的文件名: <link rel="style ...
- springmvc字符编码过滤器CharacterEncodingFilter浅析
一.在web.xml中的配置 <!-- characterEncodingFilter字符编码过滤器 --> <filter> <filter-name>cha ...
- JavaScript初探 一（认识JavaScript）
JavaScript 初探 JavaScript插入HTML中 内嵌的Js代码 <!DOCTYPE html> <html> <head> <meta cha ...
- 定制Dynamics CRM标准导出功能：不能导出指定列的值
关注本人微信和易信公众号: 微软动态CRM专家罗勇 ,回复239或者20161203可方便获取本文,同时可以在第一间得到我发布的最新的博文信息,follow me!我的网站是 www.luoyong. ...
- MySQL基于报错注入2
目标站点: 0x1 注入点判断 http://www.xxxxxx.com/pages/services.php?id=1 #true http://www.xxxxxx.com/pages/serv ...
- 【转载】Android 的 Handler 机制实现原理分析
handler在安卓开发中是必须掌握的技术,但是很多人都是停留在使用阶段.使用起来很简单,就两个步骤,在主线程重写handler的handleMessage( )方法,在工作线程发送消息.但是,有没有 ...
- Linux下用户管理：删除用户
基本语法: userdel 用户名 但是我们在删除用户的时候很显然需要利用root用户权限来进行删除才是可以的.但是利用这种方法进行删除的话是会保留家目录的,意思是该用户所对应的家目录不会被删除. 不 ...