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>
效果:
24.VUE学习之-变异方法filter与regexp实现评论搜索功能的更多相关文章
- 20.VUE学习之-变异方法push的留言版实例讲解
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue 变异方法filter和正则RegExp对评论进行搜索
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue列表渲染-变异方法
Vue 包含一组观察数组的变异方法,变异方法 (mutation method),顾名思义,会改变被这些方法调用的原始数组 所以它们也将会触发视图更新.这些方法如下: push() pop() shi ...
- Vue 变异方法sort&reverse对评论进行排序
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 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> ...
- vue学习笔记之：为何data是一个方法
vue学习笔记之:为何data是一个方法 在vue开发中,我们可以发现,data中的属性值是在function中return出来的.可为何data必须是一个函数呢?我们先看官方的解释: 当一个组件被定 ...
- Vue 变异方法splice删除评论功能
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- ACdream 1427—— Nice Sequence——————【线段树单点更新，区间查询】
Nice Sequence Time Limit: 4000/2000MS (Java/Others) Memory Limit: 128000/64000KB (Java/Others) Su ...
- Vmware 可用的激活码
4F207-8HJ1M-WZCP8-000N0-92Q6G 0A6Z5-8H1EJ-WZCL1-PK072-23DJG 0F0Q9-8F38L-RZXT9-4U054-ACW5F JA02E-09H4 ...
- JFrame 布局
引用文章:https://blog.csdn.net/zyj0813/article/details/78309739
- WPF学习一：XAML的资源(Resources)结构
一个初学者,把知识做个积累,如果有不对的地方,还请高手指出,谢谢! 先看一段代码:(下面是以Window WPF进行讲解,如果是Web 的话就把<Window改为<Page 而如果是 Us ...
- 如何使用VS将项目生成一个安装包？
VS2010项目的部署与安装winform程序,我想进行安装.1.在解决方案中 ——点击右键——添加 2.然后选择 安装和部署 ——安装向导 可以更改名称 3.点击 下一步 4.然后选择上那3个 5. ...
- Mac 颜色取值
command+shift+4 截图,我靠,我以前不知道 系统自带数码测色计, 选择显示十六位制 command+L 锁定 command+shift+c 复制 简直太方便
- 卸载VS2013 2015
我有两个VS,特别讨厌,每当使用window程序删除时候,就出现 停止工作! 然后从知乎上发现了这个 https://github.com/Microsoft/VisualStudioUninstal ...
- ArcGIS10.1的安装问题
注:必须用3个带0的文件夹里面的东西安装 1.先装Pre-release_license_manager ,然后停掉. 2.然后安装0Desktop/ArcGIS_Desktop, 3.打开0Ke ...
- c++ STL map容器成员函数
map容器用于查找,设置键值和元素值,输入键值,就能得到元素值.map对象中的元素时刻都是有序的,除非无序插入的.它是用平衡树创建的.查找很快. 函数 描述,注意有r的地方都是不能用it代替的. ma ...
- SAP Cloud for Customer Extensibility的设计与实现
今天的文章来自Jerry的同事,SAP成都研究院C4C开发团队的开发人员徐欢(Xu Boris).徐欢就坐我左手边的位置,因此我工作中但凡遇到C4C的技术问题,一扭头就可以请教他了,非常方便.下图是他 ...