23.VUE学习之-列表的排序sort
<!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>
<button v-on:click="del('all')">删除全部评论</button>
<br>
<button v-on:click="sort('asc')">按照编号顺序排序</button>
<button v-on:click="sort('dsc')">按照编号倒序排序</button>
<button v-on:click="reverse()">反转顺序</button>
</div>
<script>
var app = new Vue({
el: '#hdcms',
data: {
//当前用户输入内容
current_content: '',
comments: [
{id: 2, content: 'HDPHP'},
{id: 4, content: 'HDCMS'},
{id: 1, content: '后盾人'},
{id: 3, content: '向军老师'},
]
},
methods: {
sort(type){
switch (type) {
case 'asc':
this.comments.sort(function (a, b) {
return a.id > b.id;
});
break;
case 'dsc':
this.comments.sort(function (a, b) {
return a.id < b.id;
});
break;
}
},
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;
case 'all':
this.comments=[];
break;
}
}
}
});
</script>
</body>
</html>
效果:
23.VUE学习之-列表的排序sort的更多相关文章
- Vue学习之--------列表排序（ffilter、sort、indexOf方法的使用）、Vue检测数据变化的原理（2022/7/15）
文章目录 1.列表排序 1.1 .代码实例 1.2 .测试效果 1.3.需要掌握的前提知识 2.Vue监测数据变化的原理 2.1.代码实例 2.2 .测试效果 3.Vue检测数据的原理 3.1 基本知 ...
- Vue学习之--------列表渲染、v-for中key的原理、列表过滤的实现（2022/7/13）
文章目录 1.基本列表 1.1 基本知识 1.2 代码实例 1.3 测试效果 2.key的原理 2.1基本知识 2.2 代码实例 2.3 测试效果 2.4 原理图解 3.列表过滤 3.1 代码实例 3 ...
- python内置数据类型-字典和列表的排序 python BIT sort——dict and list
python中字典按键或键值排序(我转!) 一.字典排序 在程序中使用字典进行数据信息统计时,由于字典是无序的所以打印字典时内容也是无序的.因此,为了使统计得到的结果更方便查看需要进行排序. Py ...
- Python 排序---sort与sorted学习
当我们从数据库中获取一写数据后,一般对于列表的排序是经常会遇到的问题,今天总结一下python对于列表list排序的常用方法: 第一种:内建方法sort() 可以直接对列表进行排序 用法: list. ...
- 2019年6月12日——开始记录并分享学习心得——Python3.7中对列表进行排序
Python中对列表的排序按照是排序是否可以恢复分为:永久性排序和临时排序. Python中对列表的排序可以按照使用函数的不同可以分为:sort( ), sorted( ), reverse( ). ...
- Python 排序---sort与sorted学习（这是摘录别人的资源总结，自己可临摹学习）
第一种:内建方法sort() 可以直接对列表进行排序 用法: list.sort(func=None, key=None, reverse=False(or True)) 对于reverse这个boo ...
- 《python基础教程（第二版）》学习笔记 列表/元组（第2章）
<python基础教程(第二版)>学习笔记 列表/元组(第2章)序列中的下标从0开始x='ABC' ==> x[0]='A', x[1]='B', x[2]='C'负数索引从右边开始 ...
- Vue学习笔记-Vue.js-2.X 学习(一)===>基本知识学习
一 使用环境: windows 7 64位操作系统 二 IDE:VSCode/PyCharm 三 Vue.js官网: https://cn.vuejs.org/ 四 下载安装引用 方式1:直接 ...
- python学习之列表语法
1.列表 1 list.append(obj)在列表末尾添加新的对象2 list.count(obj)统计某个元素在列表中出现的次数3 list.extend(seq)在列表末尾一次性追加另一个序列中 ...
随机推荐
- (转)Linux系统基础网络配置老鸟精华篇
Linux系统基础网络配置老鸟精华篇 原文:http://blog.51cto.com/oldboy/784625 对于linux高手看似简单的网络配置问题,也许要说出所以然来也并不轻松,因此仍然有太 ...
- Hive 基本语法操练（六）：Hive 的权限控制
Hive 的权限控制 Hive从0.10可以通过元数据控制权限.但是Hive的权限控制并不是完全安全的.基本的授权方案的目的是防止用户不小心做了不合适的事情. 为了使用Hive的授权机制,有两个参数必 ...
- Aura Component Skills & Tools
本篇参考: https://trailhead.salesforce.com/content/learn/modules/lex_dev_lc_vf_fundamentals 不知不觉已经做了三年多的 ...
- JavaFX上手--第1天
1.第一个JavaFX Application JavaFX 使用Java来制作可视化图形,可以做动画和3D效果,JavaFX从JDK中直接使用. package application; impor ...
- log4net 最快速体验
本文供实习司机快速上手log4net最基本功能,共4步,3分钟搞定. 一.添加log4net.dll引用,可使用nuget安装或直接引用文件 二.添加配置 在app.config或web.config ...
- Ubuntu 14.04上安装Riak
一.安装riak 1. 安装包:riak_2.0.2-1_amd64.deb 路 径:~/software/riak_2.0.2-1_amd64.deb 2. 安装riak $ ...
- Spring cloud Eureka 服务治理(高可用服务中心)
在微服务的架构中,我们考虑发生故障的情况,所以在生产环境中我们需要对服务中各个组件进行高可用部署. Eureka Server 的高可用实际上就是将自己作为服务想其它服务注册中心注册自己,这样就形成了 ...
- UPDATE SQL 不同环境执行结果不一样
背景:1.前台:JQUERY 提交数据 2.后台:OWIN C# 处理接收数据 3.数据库: postgresql ========================================= ...
- 【迷你微信】基于MINA、Hibernate、Spring、Protobuf的即时聊天系统：11.定制化Log输出
欢迎阅读我的开源项目<迷你微信>服务器与<迷你微信>客户端 前言 在<迷你微信>服务器中,我们用了Log4J来进行输出,这可以在我们程序出现异常的时候找到错误发生时 ...
- CentOS下内核TCP参数优化配置详解
主动关闭的一方在发送最后一个ACK后就会进入TIME_WAIT状态,并停留2MSL(Max Segment LifeTime)时间,这个是TCP/IP必不可少的. TCP/IP的设计者如此设计,主要原 ...