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"><!--vue不能控制body和html的标签-->
<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&pop&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自学:第三章 使用方法sort( )对列表进行永久性排序
cars = ["bmw", "audi", "toyota", "subaru"] cars.sort() print ...
- vue变异方法
push() 往数组最后面添加一个元素,成功返回当前数组的长度 pop() 删除数组的最后一个元素,成功返回删除元素的值 shift() 删除数组的第一个元素,成功返回删除元素的值u ...
- Vue push() pop() shift() unshift() splice() sort() reverse() ...
Vue 变异方法 push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度. pop() 方法用于删除并返回数组的最后一个元素. shift() 方法用于把数组的第一个元素从其中删除,并返回 ...
- vue数组变异方法
Vue数组变异方法,会改变被这些方法调用的原始数组,将会触发视图更新 push() 接收任意数量的参数,把它们逐个添加到数组末尾,并返回修改后数组的长度 pop() 从数组末尾移除最后一项,减少数组的 ...
- 浅谈Vue响应式(数组变异方法)
很多初使用Vue的同学会发现,在改变数组的值的时候,值确实是改变了,但是视图却无动于衷,果然是因为数组太高冷了吗? 查看官方文档才发现,不是女神太高冷,而是你没用对方法. 看来想让女神自己动,关键得用 ...
随机推荐
- （day59）十一、CSRF、Auth模块、impotlib模块、settings源码
目录 一.模拟实现中间件的编程思想 (一)impotlib模块 (二)实现功能的配置使用 二.跨站请求伪造CSRF (一)由来 (二)form表单的CSRF (三)ajax中的CSRF (1)通过da ...
- LG1879 「USACO2006NOV」Corn Fields 状压DP
问题描述 LG1879 题解 设\(opt[i][j]\)代表前\(i\)行,且第\(i\)行状态为\(j\)的方案数. 枚举\(j\),再枚举\(k\),\(k\)为上一行的状态. 判断\(j,k\ ...
- Java入门之人需要注意的5大步骤
作为最抢手的程序开发言语之一,Java在互联网领域中的方位无需赘言.抢手也带来了高薪和许多的作业时机,对那些预备通过学习Java来改动自己命运的同学来说,需求做好以下作业. 1.考虑一下 学习Java ...
- hebust-fengyu
三人行必有我师焉,择其善者而从之,其不善者而改之. 入则无法家拂士,出则无敌国外患者,国恒亡,然后知生于忧患而死于安乐也. 狡兔死走狗烹,飞鸟尽良弓藏,敌国尽谋臣亡 今齐地方千里,百二十城,宫妇左右莫 ...
- python接口测试：如何将A接口的返回值传递给B接口
在编写接口测试脚本时,要考虑一个问题:参数值从哪里获取 一种方式是可以通过数据库来获取,但是通过这次接口测试,我发现读取数据库有一个缺点:速度慢 可能和我的sql写法有关,有些sql加的约束条件比较少 ...
- python中append的使用
没有系统地学习过python,最近在append的使用上遇到了大问题,吃到了苦头 之前一直单纯地认为通过append把数添加到list中,不需要提前开空间,非常便利,但却没有意识到这个过程并不是值传递 ...
- Mysql 免安装教程 百度云网盘有文件和word说明
一 把文件解压到一个目录下 这是解压后的目录 将my.ini文件考进去 双击打开my.ini 找到这两行更改成自己的解压路径保存 右键此电脑属性 找到高级系统设置配置环境变量 新建—>变量值是解 ...
- 【Linux】Linux 性能瓶颈阈值分析
Linux系统资源包括:CPU.IO(磁盘和网络).内存等 利用率达到三个阶段时: 1)50% 引起注意 2)70% 密切关注 3)90% 严重情况 vmstat.sar.iostat.mpstat. ...
- SpringBoot系列之配置文件占位符使用
SpringBoot系列之配置文件占位符使用 Springboot占位符支持的有随机数和配置的值等等,本博客主要介绍的是随机数和获取属性配置值的简单用法 随机数获取 支持的写法有: ${random. ...
- 利用shell脚本快速定位日志
我们平时查日志,在测试环境,日志文件只有几个的情况下,我们可以通过找时间接近的文件然后根据关键词定位报错位置,大不了都查一遍,这都可以忍受.但是在实际的生产环境下,服务器集群部署,每天的日志非常多非常 ...