博客
关于我
vue页面数组做数据置顶
阅读量:529 次
发布时间:2019-03-08

本文共 819 字,大约阅读时间需要 2 分钟。

`

//置顶功能async function stickHonor(index) {    const obj = this.honorList[index];    const id = obj.id;    obj.isStick = 1;    // 调用接口置顶    const res = await stickStudentHonors({id, isStick: 1});    // 删除原位置    this.honorList.splice(index, 1);    // 将元素插入到数组开头    this.honorList.splice(0, 0, obj);}//取消置顶功能async function unstickHonor(index) {    // 计算当前被置顶的元素总数    let sum = 0;    for (const data of this.honorList) {        if (data.isStick === 1) {            sum++;        }    }    const obj = this.honorList[index];    const id = obj.id;    // 调用接口取消置顶    const res = await stickStudentHonors({id, isStick: 0});    // 删除原位置    this.honorList.splice(index, 1);    // 将元素插入到置顶前面一个位置    this.honorList.splice(sum - 1, 0, obj);}

置顶和取消置顶功能是前端常见的逻辑操作。上述代码实现了基于数组操作的置顶逻辑,其中使用splice方法进行元素插入和删除。通过这种方法,数组会自动响应式更新,避免了手动刷新的需求。

转载地址:http://ffviz.baihongyu.com/

你可能感兴趣的文章
php-cgi耗尽报502错误
查看>>
php-cgi(fpm-cgi) 进程 CPU 100% 与 file_get_content...
查看>>
PHP-DI/Invoker 开源项目使用教程
查看>>
php-fpm与Nginx运行常见错误说明
查看>>
php-fpm比php成为apache模块好在哪
查看>>
php-fpm超时时间设置request_terminate_timeout分析
查看>>
php-fpm进程数优化
查看>>
PHP-GD库-分类整理
查看>>
php-laravel框架用户验证(Auth)模块解析(一)
查看>>
php-laravel框架用户验证(Auth)模块解析(三)登录模块
查看>>
php-laravel框架用户验证(Auth)模块解析(二)注册模块
查看>>
php-laravel框架用户验证(Auth)模块解析(四)忘记密码
查看>>
php-redis中文参考手册_Ping_echo_set_get_setex_psetex_...
查看>>
Redis使用不当导致应用卡死
查看>>
PHP-Shopify-API-Wrapper 使用教程
查看>>
php-兔子问题,斐波那契数列
查看>>
PHP-希尔排序
查看>>
PHP-快速排序的2种实现方法
查看>>
Redis使用lua脚本
查看>>
php-数据结构-二叉树的构建、前序遍历,中序遍历,后序遍历,查找,打印
查看>>