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的同学会发现,在改变数组的值的时候,值确实是改变了,但是视图却无动于衷,果然是因为数组太高冷了吗? 查看官方文档才发现,不是女神太高冷,而是你没用对方法. 看来想让女神自己动,关键得用 ...
随机推荐
- SVO稀疏图像对齐代码分析
SVO使用稀疏直接法计算两帧之间的初始相机位姿,即使用两帧之间稀疏的4*4 patch的光度误差为损失函数,使用G-N优化算法获得两帧之间的位姿变换,由于没有特征匹配过程效率较高.相比自己实现的稀疏直 ...
- Codeforces Round #594 (Div. 1) C. Queue in the Train 模拟
C. Queue in the Train There are
- 【STM32H7教程】第15章 STM32H7的GPIO基础知识（重要）
完整教程下载地址:http://www.armbbs.cn/forum.php?mod=viewthread&tid=86980 第15章 STM32H7的GPIO基础知识(重要) ...
- Flink1.7.2安装部署的几种方式
原文链接:https://blog.csdn.net/a_drjiaoda/article/details/88037282 前言:Flink的运行一般分为三种模式,即local.Standalone ...
- PHP 扩展与 ZEND 引擎的整合
PHP 扩展是对 PHP 功能的一个补充,编写完 PHP 扩展以后, ZEND 引擎需要获取到 PHP 扩展的信息,比如 phpinfo() 函数是如何列出 PHP 扩展的信息,PHP 扩展中的函数如 ...
- c#汉字转拼音首字母全拼支持多音字
1.首先在NuGet安装pingyinConverter 2.下载-安装-引用ChineseChar.dll到项目中 官网了解:http://www.microsoft.com/zh-cn/downl ...
- Core源码（二） Linq的Distinct扩展
先贴源码地址 https://github.com/dotnet/corefx/tree/master/src/System.Linq/src .NET CORE很大一个好处就是代码的开源,你可以详细 ...
- Z从壹开始前后端分离【 .NET Core2.2/3.0 +Vue2.0 】框架之六 || API项目整体搭建 6.1 仓储+服务+抽象接口模式
本文梯子 本文3.0版本文章 前言 零.完成图中的粉色部分 2019-08-30:关于仓储的相关话题 一.创建实体Model数据层 二.设计仓储接口与其实现类 三.设计服务接口与其实现类 四.创建 C ...
- python基础(10):文件操作
1. 初识文件操作 使⽤python来读写⽂件是非常简单的操作.我们使⽤open()函数来打开⼀个⽂件,获取到⽂ 件句柄,然后通过⽂件句柄就可以进⾏各种各样的操作了,根据打开⽅式的不同能够执⾏的操 作 ...
- PlayJava Day003
今日所学: /* 2019.08.19开始学习,此为补档. */ ①char:只能有一个字段.字符:' ' ②二进制:0000 0000 最后一位为0就不算,为1代表20. 如25为:0001 100 ...