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的同学会发现,在改变数组的值的时候,值确实是改变了,但是视图却无动于衷,果然是因为数组太高冷了吗? 查看官方文档才发现,不是女神太高冷,而是你没用对方法. 看来想让女神自己动,关键得用 ...
随机推荐
- Http协议请求方法及body类型(思路比较清晰的)
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/u010244522/article/de ...
- 《js高程》笔记总结二（变量，作用域，内存问题）
理解基本类型和引用类型的值,理解执行环境,理解垃圾收集 基本类型的值和引用类型的值 基本类型:简单的数据段,引用类型:指可能由多个值构成的对象(在将一个值赋值的时候,解析器必须知道这个值是基本类型值还 ...
- 转载-通过ApplicationContext 去获取所有的Bean
Spring Boot - 获取所有的Bean信息 阅读目录 前言 通过ApplicationContext 去获取所有的Bean 前言 Spring Boot启动的时候需要加载许多Bean实现最小化 ...
- Unity Package包内插件解锁
起因: 新版的Unity将模块工具与游戏中的资源文件分开放置,但有一个问题,里边的插件都是只读的,无法添加内容,连创建都是灰色的orz: 要想给这些插件添加一些别的自定义功能,那基本等于做梦,而且插件 ...
- oracle学习笔记（十一） 高级查询
高级查询 分组查询 select * from student [where ] [having ] --二次限定 [order by] --asc升序 desc降序 默认升序 查看EMPLOYEE表 ...
- cmdb项目-3
1. cmdb资产审计 2.stark组件使用 快速完成网站的一个组件,使用方式与django的admin系统类似 ,仅仅将model注册 ,就可以生成对model增删改查的页面 ,当然这里还包括了模 ...
- DDL、DML、TCL
一.DDL 1.创建表(CREATE) (1)数据库对大小写不敏感,只对字符串大小写敏感. (2)使用create关键字创建表.(-- 表示注释). 格式: CREATE TABLE 表名( 字段名1 ...
- Windows下的DNS命令用法
- ipconfig 查看DNS缓存内容: ipconfig /displaydns 将显示所有缓存的DNS解析结果. 清空DNS缓存内容: ipconfig /flushdns 将清空缓存的DNS解 ...
- 848. Shifting Letters
问题描述: 问题规约为:对每一个数组S,移动(shifts[0] + shitfs[1]+...+shitfs[i] )mod 26位 def shiftingLetters(self, S: str ...
- php 的定界符 <<<eof
PHP是一个Web编程语言,在编程过程中难免会遇到用echo来输出大段的html和javascript脚本的情况,如果用传统的输出方法 ——按字符串输出的话,肯定要有大量的转义符来对字符串中的引号等特 ...