前言

其实很简单只是用了js的几个函数

  1. substr
  2. unshift
  3. splice

完整代码 | mpvue模仿QQ

代码

思路很简单,获取当前元素下标然后通过unshift函数将该值插入到数组第一位,再通过splice函数删除该值

核心代码

 listTop (e) {
const that = this
let index = e.currentTarget.dataset.eventid.substr(e.currentTarget.dataset.eventid.length - 1, 1)
that.messageList.unshift(that.messageList[index])
that.messageList.splice(++index, 1)
}

效果图

mpvue——实现点击数组内的某一元素进行置顶(排序第一)操作的更多相关文章

  1. ROWNUMBER() OVER( PARTITION BY COL1 ORDER BY COL2)用法,先分组,然后在组内排名,分组计算,主表与附表一对多取唯一等

    ROWNUMBER() OVER( PARTITION BY COL1 ORDER BY COL2)用法 今天在使用多字段去重时,由于某些字段有多种可能性,只需根据部分字段进行去重,在网上看到了row ...

  2. 组内Linq培训记录

    注: 由于该培训是在组内分享,先写成了Word,而word中的代码都以截图方式呈现了,而在博客园不能很方便的粘贴截图进来,所以我用插入代码的方式加进来,如果文中说“如下图”或“如下图代码”,那么就直接 ...

  3. sql 分组后 组内排名

    语法:ROW_NUMBER() OVER(PARTITION BY COLUMN ORDER BY COLUMN) 简单的说row_number()从1开始,为每一条分组记录返回一个数字,这里的ROW ...

  4. sql查询技巧,按时间分段进行分组,每半小时一组统计组内记录数量

    今天拿到一个查询需求,需要统计某一天各个时间段内的记录数量. 具体是统计某天9:00至22:00时间段,每半小时内订单的数量,最后形成的数据形式如下: 时间段          订单数 9:00~9: ...

  5. 如何用SQL实现组内前几名的输出

    关于问题 如何查询组内最大的,最小的,大家或许都知道,无非是min.max的函数使用.可是如何在MySQL中查找组内最好的前两个,或者前三个? 什么是相关子查询 在提出对于这个问题的对应方法之前,首先 ...

  6. BIRT实现组内跨行计算

    问题来源:http://developer.actuate.com/community/forum/index.php?/topic/36160-dealing-with-previous-rows- ...

  7. 模拟QQ分组(具有伸缩功能) (添加开源框架的光闪烁效果)SimpleExpandableListAdapter 适配器的用法,并且可添加组及其组内数据。

    package com.lixu.qqfenzu; import java.util.ArrayList; import java.util.HashMap; import java.util.Lis ...

  8. sql server迁移数据(文件组之间的互相迁移与 文件组内文件的互相迁移)

    转自:https://www.cnblogs.com/lyhabc/p/3504380.html?utm_source=tuicool SQLSERVER将数据移到另一个文件组之后清空文件组并删除文件 ...

  9. VUE组内培训

    最近去参加了一个外部VUE的周末培训,加上自己比较感兴趣所以对这项很热的前端框架做了点学习,顺便给组内同事做个简单的分享,希望下次有项目可以使用上- VUE的语法教程网上很多我就不一一列举,截图放一下 ...

随机推荐

  1. vue项目实战, webpack 配置流程记录

    vue项目实战记录,地址在这 购物车单界面 npm install npm run dev 跑起来可以看到界面效果 这里简单记录一下webpack的编译流程 入口 package.json " ...

  2. centos 7如何配置网络、网卡、ip命令

    Linux网络相关配置文件 Linux网络配置相关的文件根据不同的发行版目录名称有所不同,但大同小异,主要有似下目录或文件. (1)/etc/hostname:主要功能在于修改主机名称. (2)/et ...

  3. 【调试】JS断点调试

    1.断点调试是啥?难不难? 断点调试其实并不是多么复杂的一件事,简单的理解无外呼就是打开浏览器,打开sources找到js文件,在行号上点一下罢了.操作起来似乎很简单,其实很多人纠结的是,是在哪里打断 ...

  4. tmux基本操作

    安装和移除: // 安装 sudo apt-get install tmux // 移除 sudo apt-get remove tmux 常用命令: tmux [new -s 会话名 -n 窗口名] ...

  5. git多人协作--分支

    分支: 创建分支: git checkout -b 新分支 切换分支: git checkout 目标分支 删除分支: git branch -d 待删除分支 推送到远程分支: git checkou ...

  6. (3)Swing常用组件

    JTextField-文本框 继承自javax.swing.text.JTextComponent类

  7. 转:HtmlCxx用户手册

    1.1 简介 使用由KasperPeeters编写的强大的tree.h库文件,可以实现类似STL的DOM树遍历和导航. 打包好的Css解析器. 看似很像C++代码的C++代码(其实已不再是C++了) ...

  8. Spring在Bean中注入集合

    以下内容引用自http://wiki.jikexueyuan.com/project/spring/injecting-collection.html: 如果你想传递多个值,如Java Collect ...

  9. Java截取视频首帧并旋转正向

    package test; import java.awt.Dimension; import java.awt.Graphics2D; import java.awt.Image; import j ...

  10. java文本文件加密解密类

    原文:http://www.open-open.com/code/view/1420031154765 import java.awt.*; import java.awt.event.*; impo ...