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中触发事件,发送数据 注意:接 ...
随机推荐
- Python 开发面试总结
网络基础 如何确定发送过来的数据的完整性(有无中间人攻击)? 散列值校验(MD5.SHA-1).数字签名(PGP),需要用户亲自校验,若是散列值或数字签名本身被篡改,用户是无法判断出来的. HTTPS ...
- centos7 最小化安装后的配置优化
echo #CENTOS7echo #1.最小化安装之后需要做的事echo 2.配置echo 2.1 安装网络yum install net-tools -y echo 2.2 更新机器名echo h ...
- PV、TPS、QPS是怎么计算出来的？
PV=page viewTPS=transactions per secondQPS=queries per secondRPS=requests per second RPS=并发数/平均响应时间 ...
- python在CentOS 7中的安装
CentOS 7 中默认安装了python2.7.5,可能部分开发人员需要使用python3系列的产品,因为版本不“向下”兼容,诸如print函数,因此需要对于不同的项目进行python版本之间的切换 ...
- 在VS2012中采用C++中调用DLL中的函数（4）
转自:http://www.cnblogs.com/woshitianma/p/3683495.html 这两天因为需要用到VS2012来生成一个DLL代码,但是之前并没有用过DLL相关的内容,从昨天 ...
- python 打印 九九表
用Python 打印九九表. print 每打印一行默认会带有换行, 在print语句后加上,end = 't' 会变成tab. 排版会好点. def main(): for i in range(1 ...
- C#打开文件资源管理器
需求: 需要打开windows的文件资源管理器进行浏览文件. 方法: 利用命令提示符(cmd)中输入explorer.exe命令即可打开文件资源管理器 代码实现: 1.引用 using System. ...
- CSS控制滚动条的样式
到今天(2018年10月25日)为止, 这还是chrome上的一个实验性特性: ::-webkit-scrollbar{width:4px;height:4px;} ::-webkit-scrollb ...
- C# Programming Guide-->Statements, Expressions, and Operators-->Anonymous Functions
C# Programming Guide Anonymous Functions Lambda Expressions Anonymous Methods In versions of C# befo ...
- kylin入门到实战：cube详述
版权申明:转载请注明出处. 文章来源:http://bigdataer.net/?p=306 排版乱?请移步原文获得更好的阅读体验 1.什么是cube? cube是所有dimession的组合,每一种 ...