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中触发事件,发送数据 注意:接 ...
随机推荐
- -webkit-box
父容器 display: flex; justify-content: center;/*主轴*/ align-items: center; /*交叉轴*/ display: -webkit-box; ...
- android解决setOnItemClickListener没有响应
今天遇到一种情况,抽屉式导航栏里的listView的点击事件没有响应点击事件. 查看了下,原来是因为抽屉式导航栏的fragment声明,放在了内容fragment之前,导致点击动作被内容fragmen ...
- leveldb0
leveldb的源代码进行学习,则纯粹是出于一个码农对美好世界进行探究的好奇.接下来将尽可能从源代码上给出leveldb代码的详尽注释,这里先列出自己在阅读前后的主要参考. 0 官方文档http:// ...
- shell 脚本中双引号 单引号 反引号 的区别
转自:http://blog.csdn.net/iamlaosong/article/details/54728393 最近要编个shell脚本处理数据,需要检测数据文件是否存在,文件名中包含日期,所 ...
- Oracle中验证非空的函数NVL(),NVL2()总结
1.NVL()函数 NVL函数的格式如下: NVL(expr1,expr2) 含义是:如果oracle第一个参数为空那么显示第二个参数的值,如果第一个参数的值不为空,则显示第一个参数本来的值. 2 N ...
- nfs挂载
安装: yum install nfs-utils rpcbind 配置共享目录:vim /etc/exports /xxx/cloudcms *(insecure,rw,async,no_root_ ...
- Web服务器对比介绍
1.Apache Apache是非常强大的老牌Web服务器,具有模块化结构,拥有众多非常成熟稳定的模块,目前仍是使用非常广泛的服务器,但它是基于多进程HTTPServer,需要对每个用户请求创建一个子 ...
- awk十三问-【AWK学习之旅】
---===AWK学习之旅===--- 十三个常用命令行处理 [root@monitor awkdir]# cat emp.txt Beth 4.00 0 Dan 3.75 0 Kathy 4.0 ...
- Java 安装教程(Eclipse) + 汉化 + 简单创建java项目
Java 安装教程(Eclipse) 要安装Java 要分两个步骤: 1.JDK的安装 2.Eclipse的安装 3.Eclipse汉化 4.Eclipse创建简单java项目 1和2的顺序不能颠倒, ...
- rocketMQ基本理解
消息中间件需要解决哪些问题? Publish/Subscribe 发布订阅是消息中间件的最基本功能,也是相对于传统RPC通信而言. Message Priority 规范中描述的优先级是指在一个消息队 ...