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的同学会发现,在改变数组的值的时候,值确实是改变了,但是视图却无动于衷,果然是因为数组太高冷了吗? 查看官方文档才发现,不是女神太高冷,而是你没用对方法. 看来想让女神自己动,关键得用 ...
随机推荐
- 房屋布局分析《Physics Inspired Optimization on Semantic Transfer Features: An Alternative Method for Room Layout Estimation》
视觉算法在智能审核系统上的演进与实践 刘天悦 贝壳找房 / 资深工程师 https://static001.geekbang.org/con/56/pdf/1088777747/file/%E8%A7 ...
- Paper | Non-local Neural Networks
目录 1. 动机 2. 相关工作 3. Non-local神经网络 3.1 Formulation 3.2 具体实现形式 3.3 Non-local块 4. 视频分类模型 4.1 2D ConvNet ...
- oracle--共享磁盘挂载
01,查看挂载的磁盘 [root@SHLPDBWX01 ~]# fdisk -l Disk /dev/sda: bytes heads, sectors/track, cylinders Units ...
- COM 编程基础
DirectX 采用了 COM 标准.而 DirectShow 是一套完全基于 COM 的应用系统.要想深入学习 DirectShow,掌握一些 COM 编程的基础知识是必不可少的. 一.COM 是什 ...
- python-pandas读取mongodb、读取csv文件
续上一篇博客(‘’selenium爬取NBA并将数据存储到MongoDB‘)https://www.cnblogs.com/lutt/p/10810581.html 本篇的内容是将存储到mongo的数 ...
- 通过组件实现相同group下字符串拼接
实现效果 组件处理流程如下: 1 使用Sorter组件对ColA进行排序 2 使用expression组件进行如下配置 3 使用aggregate组件进行如下配置 ColA ...
- js的事件循环（Event Loop）
(本文从掘金小册整理) 首先介绍一下几个概念 进程与线程 相信大家经常会听到 JS 是单线程执行的,但是你是否疑惑过什么是线程? 讲到线程,那么肯定也得说一下进程.本质上来说,两个名词都是 CPU 工 ...
- win7和win10自带桌面便签哪里找
一些小伙伴习惯使用windows自带的便签功能,但win7和win10区别较大, 导致更新系统后不知道在哪里找,甚至以为没有该功能了, 其实不然,下面我总结了2种方法,希望能帮到有需要的人 win7( ...
- 最全各种系统版本的XPosed框架资料下载整理
由于XPosed在不同安卓系统版本中对应的版本不同,给很多新手造成极大困扰,本文作者经过几番努力,给大家整理了各个版本对应的xposed框架版本以及相关资料,并附上相关下载链接,希望对大伙有所帮助. ...
- 1G内存VPS安装 mysql5.6 经常挂
背景介绍 去年3月份的时候参加了腾讯云主机活动,5年362,非常优惠.当时的想法是买来可以瞎整一波,虽然配置不高,但是搞点事情也够用. 配置如下,上海机房 1 核 1 GB 1 Mbps 系统盘:普通 ...