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中触发事件,发送数据 注意:接 ...
随机推荐
- 【转】深入浅出UML类图
转自:http://www.cppblog.com/API/archive/2013/07/04/201506.html 在UML 2.0的13种图形中,类图是使用频率最高的UML图之一.Martin ...
- hive报错汇总
1.需要注意的是,要在namenode(超级用户)上操作,貌似是 hive> insert into table record_partition partition(trancation_da ...
- netty11---管道
客户端: package com.server; import java.net.Socket; public class Client { public static void main(Strin ...
- java多态 以及静态绑定 动态绑定积累
重载,英文名是overload,是指在一个类中定义了一个以上具有相同名称的方法,这些方法的参数个数.参数类型和顺序不能相同.返回类型可以相同,也可以不同. 重写,英文名是overrid,是指在继承情况 ...
- WPF和Sliverlight不同之UIElement-事件
WPF: http://msdn.microsoft.com/en-us/library/System.Windows.UIElement.aspx DragEnter DragLeave DragO ...
- 第三周JAVA程序设计基础学习总结
20145322学号 <Java程序设计>第3周学习总结 ## 教材学习内容总结 之前第三章说过Java中主要有基本类型和类类型两种类型系统,第四章主要谈类类型. 类定义时使用class关 ...
- VS+Qt
1.安装vs 2.安装qt[带msvc编译器的] 3.安装addin插件 4.新建qt app项目 5.在qt options里添加qt版本 路径添加到msvc那一层,如:E:\Qt5.9\5.9\m ...
- jz2440使用openjtag+openocd+eclipse调试【学习笔记】
平台:jz2440 作者:庄泽彬(欢迎转载,请注明作者) 说明:韦东山二期视频学习笔记 交叉编译工具:arm-linux-gcc (GCC) 3.4.5 eclipse版本:eclipse-cpp-l ...
- LeetCode——minimum-path-sum
Question Given a m x n grid filled with non-negative numbers, find a path from top left to bottom ri ...
- LeetCode——Is Subsequence
Question Given a string s and a string t, check if s is subsequence of t. You may assume that there ...