Vue 变异方法sort&reverse对评论进行排序

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="vue.js"></script>
<title id="title">{{title}}</title>
</head>
<body>
<div id="ask">
<ul>
<li v-for="(v,k) in list">
{{v.id}} ===== {{v.content}}<button v-on:click="remove(k)">删除</button>
</li>
</ul>
<textarea v-model="content" cols="30" rows="10"></textarea><br>
<button v-on:click="push('pre')">发表到前面</button>
<button v-on:click="push('end')">发表到后面</button>
<br>
<button v-on:click="del('first')">删除第一条</button>
<button v-on:click="del('last')">删除最后一条</button>
<br>
<button v-on:click="sort">排序</button>
<button v-on:click="reverse">反转</button>
</div>
<script>
var vue = function (options){new Vue(options)};
vue({
el:'#title',
data:{
title:'Vue 变异方法sort&reverse对评论进行排序'
}
});
var app = vue({
el:'#ask',
data:{
content:'',
list:[
{'id':3,'content':'hello'},
{'id':5,'content':'简单记录'},
{'id':2,'content':'个人博客'},
{'id':1,'content':'学习笔记'},
{'id':4,'content':'想学什么学什么 '}
]
},
methods:{
reverse(){
return this.list.reverse();
},
sort(){
this.list.sort(function (a,b) {
return a.id>b.id;
})
},
remove(k){
this.list.splice(k,1)
},
push(type){
var id = this.list.length+1;
var content_push = {id:id,'content':this.content};
switch (type) {
case 'pre':
this.list.unshift(content_push);
break;
case "end":
this.list.push(content_push);
break;
}
this.content='';
},
del(type){
switch (type) {
case 'first':
this.list.shift();
break;
case "last":
this.list.pop();
break;
}
}
}
});</script>
</body>
</html>

Vue 变异方法sort&reverse对评论进行排序的更多相关文章

Vue 变异方法filter和正则RegExp对评论进行搜索
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
Vue 变异方法splice删除评论功能
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
Vue 变异方法unshift&amp&semi;pop&amp&semi;shift
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
Vue 变异方法Push的留言板实例
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
Python自学&colon;第三章使用方法sort( )对列表进行永久性排序
cars = ["bmw", "audi", "toyota", "subaru"] cars.sort() print ...
vue变异方法
push() 往数组最后面添加一个元素,成功返回当前数组的长度 pop() 删除数组的最后一个元素,成功返回删除元素的值 shift() 删除数组的第一个元素,成功返回删除元素的值u ...
Vue push() pop() shift() unshift() splice() sort() reverse() &period;&period;&period;
Vue 变异方法 push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度. pop() 方法用于删除并返回数组的最后一个元素. shift() 方法用于把数组的第一个元素从其中删除,并返回 ...
vue数组变异方法
Vue数组变异方法,会改变被这些方法调用的原始数组,将会触发视图更新 push() 接收任意数量的参数,把它们逐个添加到数组末尾,并返回修改后数组的长度 pop() 从数组末尾移除最后一项,减少数组的 ...
浅谈Vue响应式(数组变异方法)
很多初使用Vue的同学会发现,在改变数组的值的时候,值确实是改变了,但是视图却无动于衷,果然是因为数组太高冷了吗? 查看官方文档才发现,不是女神太高冷,而是你没用对方法. 看来想让女神自己动,关键得用 ...

随机推荐

linux安装软件的学习
Yum(全称为 Yellow dog Updater, Modified)是一个在Fedora和RedHat以及CentOS中的Shell前端软件包管理器.基于RPM包管理,能够从指定的服务器自动下载 ...
【cs229-Lecture15】奇异值分解
PCA的实现一般有两种,一种是用特征值分解去实现的,一种是用奇异值分解去实现的. 内容: PCA (主成份分析)是一种直接的降维方法,通过求解特征值与特征向量,并选取特征值较大的一些特征向量来达到降 ...
PL/SQL 异常处理
SQL> set serveroutput on SQL> declare name varchar2(10); begin select ename into name from ...
借助共享缓存redis实现分布式锁
新开发的系统须要控制每一个时刻回收缓存的GC线程有且仅仅有一个在执行,假设有多个线程同一时候执行,会造成系统崩溃.假设仅仅有一个JVM进程那么非常好办.简单的借助synchronizedkeyword ...
EC读书笔记系列之17：条款41、42、43、44、45、46
条款41 了解隐式接口与编译器多态记住: ★classes和templates都支持接口和多态 ★对classes而言接口是显式的(explicit),以函数签名为中心.多态则是通过virtual函 ...
history&period;go(-1)和History&period;back()的区别
简单的说就是:go(-1): 返回上一页,原页面表单中的内容会丢失:back(-1): 返回上一页,原页表表单中的内容会保留,一般还是back(-1)用的多
Alpha代码规范、冲刺任务与计划
Alpha代码规范.冲刺任务与计划团队名称: 云打印作业要求: Alpha代码规范.冲刺任务与计划作业目标:代码规范.冲刺任务与计划. 团队队员队员学号队员姓名个人博客地址备注 2216 ...
（转）C&num; Aop简单扫盲及ORM实体类属性拦截示例
转自: http://www.cnblogs.com/cyq1162/archive/2012/05/30/2526573.html 先说下场景,C#中为什么要使用Aop,而我又是在哪里使用Aop? ...
未来it行业发展方向
https://www.zhihu.com/question/24222456 IT行业,未来10年和20年,技术发展方向会是什么? 本人CS 本科刚毕业,正在选择工作方向.希望之后专注一个方向发展. ...
rest&lowbar;framework 的验证，权限，频率
回到顶部快速实例 Quickstart 回到顶部序列化创建一个序列化类简单使用开发我们的Web API的第一件事是为我们的Web API提供一种将代码片段实例序列化和反序列化为诸如json之 ...