023——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>
023——VUE中数据排序sort() / 数据反转 reverse() 的使用的更多相关文章
- vue 中使用 AJAX获取数据的方法
在VUE开发时,数据可以使用jquery和vue-resource来获取数据.在获取数据时,一定需要给一个数据初始值. 看下例: <script type="text/javascri ...
- Vue中Object和Array数据变化侦测原理
在学完Vue.js框架,完成了一个SPA项目后,一直想抽时间找本讲解Vue.js内部实现原理的书来看看,经过多方打听之后,我最后选择了<深入浅出Vue.js>这本书.然而惭愧的是,这本书已 ...
- sort排序，按指定字段进去重，sort -t "^" -k 8 -su，ls给文件名中数字排序sort -k1.5n，Tab符要转义
sort sort 命令对 File 参数指定的文件中的行排序,并将结果写到标准输出.如果 File 参数指定多个文件,那么 sort 命令将这些文件连接起来,并当作一个文件进行排序. sort语法 ...
- java中的排序(自定义数据排序)--使用Collections的sort方法
排序:将一组数据按相应的规则 排列 顺序 1.规则: 基本数据类型:日常的大小排序. 引用类型: 内置引用类型(String,Integer..),内部已经指定规则,直接使用即可.---- ...
- vue中如何获取后台数据
原文链接:http://blog.csdn.net/vergilgeekopen/article/details/68954940 需要引用vue-resource 安装请参考https://gith ...
- Vue中 等待DOM或者数据完成 在执行 --this.$nextTick()
虽然 Vue.js 通常鼓励开发人员沿着“数据驱动”的方式思考,避免直接接触 DOM,但是有时我们确实要这么做.比如一个新闻滚动的列表项.如果在这里需要操作dom, 应该是等待 Vue 完成更新 DO ...
- 如何在Vue中使用Mockjs模拟数据的增删查改
之前一直使用json-server在前端开发时,搭建本地数据接口测试,但有时又需要将做好的项目放于 github page上做项目演示.在本地时,json server很好使用,但一旦放在github ...
- vue中父组件传数据给子组件
父组件: <template> <parent> <child :list="list"></child> //在这里绑定list对 ...
- Vue中独立组件之间数据交互
独立组件之间数据交互:通过自定义事件 组件A中的[数据],传递给组件B 1.创建组件A,组件B 2.组件B在实例创建完成时就开始监听事件[等待接收数据]:钩子 3.组件A中触发事件,发送数据 注意:接 ...
随机推荐
- 404 Not Found 探秘Nginx转发处理流程
一.问题描述 访问一个链接地址后报404 Not Found nginx/1.10.2 1 112.95.211.154 - - [08/Mar/2018:15:22:21 +0800] " ...
- Miller_Rabbin大素数测试
伪素数: 如果存在和n互素的正整数a满足a^(n-1)≡1(mod n),则n是基于a的伪素数. 是伪素数但不是素数的个数是非常非常少的,所以如果一个数是伪素数,那么他几乎是素数. Miller_Ra ...
- testng失败截图，注解方式调用。
今天一整天都在研究testng失败截图的方法,参考网上的前辈们的资料,加上自己的理解,终于搞出来了. package com.dengnapianhuahai; /** * 自定义注释 * */ im ...
- UI自动化测试框架之Selenium关键字驱动 （转）
摘要 自动化测试框架demo,用关键字的形式将测试逻辑封装在数据文件中,测试工具解释这些关键字即可对其应用自动化 一.原理及特点 1. 关键字驱动测试是数据驱动测试的一种改进类型 2. 主要 ...
- Hive环境安装
说明: (Hbase依赖于Hadoop,同时需要把元数据存放在mysql中),mysql自行安装 Hadoop2.0安装参考我的博客: https://www.cnblogs.com/654wangz ...
- HttpWebRequest 返回BadRequest(400) 同时返回Response
今天用Fiddler分析安卓APP的一个登陆功能的时候,账号和密码错误会返回相应的消息,并且状态码是400. 正常用法: /// <summary> /// 读取返回的内容 /// < ...
- Django学习笔记之uWSGI详解
WSGI是什么? WSGI,全称 Web Server Gateway Interface,或者 Python Web Server Gateway Interface ,是为 Python 语言定义 ...
- iframe自适应高度(兼容多种浏览器)
http://jingyan.baidu.com/article/b87fe19eaeb2cf5218356896.html 让iframe自适应高度,下面是实现的源码: <div id=&qu ...
- [pixhawk笔记]6-uORB流程及关键函数解析
本文中将结合代码.文档及注释,给出uORB执行流程及关键函数的解析,由于uORB的机制实现较为复杂,所以本文主要学习如何使用uORB的接口来实现通信.回到上一篇笔记中的代码: #include < ...
- 配置linux内核输出所有的log信息
答案:修改内核文件include/linux/printk.h (内核版本为4.9) 修改前 #define CONSOLE_LOGLEVEL_DEFAULT 7 /* anything MORE ...