VUE中数据排序sort() / 数据反转 reverse() 的使用
时间:2020-01-18
本文章向大家介绍VUE中数据排序sort() / 数据反转 reverse() 的使用,主要包括VUE中数据排序sort() / 数据反转 reverse() 的使用使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue中的变异方法:排序:sort()方法 和反转:reverse() 方法</title> <script type="text/javascript" src="vue.js"></script> </head> <body> <div id="demo"> <li v-for="(v,k) in comments"> {{v.id}}——{{v.content}} <button v-on:click="remove(k)">删除</button> </li> <textarea rows="10" cols="20" v-model="current"></textarea><br/> <button v-on:click="push('first')">在数据前面增加</button> <button v-on:click="push('last')">在数据后面增加</button> <br> <button v-on:click="del('first')">删除第一个数据</button> <button v-on:click="del('last')">删除最后一个数据</button> <br> <button v-on:click="sort">降序排序</button> <br> <button v-on:click="reverse">数据反转</button> <br> <button v-on:click="alldel">删除所有数据</button> </div> <script type="text/javascript"> new Vue({ el:"#demo", data:{ current:"", comments:[ {id:1,content:'JAVA'}, {id:0,content:'PHP'}, {id:3,content:'HTML'}, {id:2,content:'CSS'} ] }, methods:{ //删除所有数据的方法: alldel(){ this.comments=[]; }, //倒序排序的方法: sort(){ this.comments.sort((a,b)=>{ return a.id<b.id; }); }, //反转数据: reverse(){ this.comments.reverse(); }, //增加数据的方法: push(type){ var id=this.comments.length; var content={id:id,content:this.current}; switch (type){ case 'first': this.comments.unshift(content); break; case 'last': this.comments.push(content); break; } this.current=""; }, //删除数据的方法: del(type){ switch (type){ case 'first': this.comments.shift(); break; case 'last': this.comments.pop(); break; } }, //点击删除,删除对应的数据信息: remove(k){ this.comments.splice(k,1); } } }); </script> </body> </html>
原文地址:https://www.cnblogs.com/fdxjava/p/12209502.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Centos8搭建本地Web服务器的实现步骤
- 总结Linux 6种日志查看方法
- Ubuntu18.04一次性升级Python所有库的方法步骤
- linux下php安装xml扩展的详细步骤
- 查看linux文件的命令详解
- 解决Linux+Apache服务器URL区分大小写问题
- Centos8(最小化安装)全新安装Python3.8+pip的方法教程
- 使用 Linux seq 命令生成数字序列(推荐)
- CentOS 7上为PHP5安装suPHP的方法(彭哥)
- Linux修改主机名命令详解
- 在CentOS 7.2上安装SuPHP的详细方法
- centos6-7 yum安装php的方法(推荐)
- Linux修改用户所属组的方法
- centos通过yum安装php的教程
- 树莓派4安装Ubuntu 19.10的教程详解