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的同学会发现,在改变数组的值的时候,值确实是改变了,但是视图却无动于衷,果然是因为数组太高冷了吗? 查看官方文档才发现,不是女神太高冷,而是你没用对方法. 看来想让女神自己动,关键得用 ...
随机推荐
- 使用 Hbuilder 连接手机调试移动端项目
点击界面上的浏览器右侧的倒三角. 弹出列表以后,点击最后一行 “设置web服务器...”.继续弹出,点击右下角的“外置Web服务器设置”. 点新建. 弹出框后,填入“名称”和“浏览器运行U ...
- css top,right,bottom,left设置为0有什么用？它和width:100%和height:100%有什么区别？
壹 ❀ 引 当我们使用position属性时,总免不了与top,left,right,bottom四个属性打交道,那么这四个属性都设置为0时有什么用,与宽高设置100%又有什么区别?本文对此展开讨论 ...
- Luogu P3600 随机数生成器
Luogu P3600 随机数生成器 题目描述 sol研发了一个神奇的随机数系统,可以自动按照环境噪音生成真·随机数. 现在sol打算生成\(n\)个\([1,x]\)的整数\(a_1...a_n\) ...
- [07]ASP.NET Core 进程外(out-of-process)托管
ASP.NET Core 进程外(out-of-process)托管 本文作者:梁桐铭- 微软最有价值专家(Microsoft MVP) 文章会随着版本进行更新,关注我获取最新版本 本文出自<从 ...
- Django 全局log process_exception中间件
class BaseResp: # 基础的返回值类 def __init__(self, code, msg, data): self.code = code self.msg = msg self. ...
- Java 内建函数式接口
Java 提供一个包:java.util.function :包中主要提供四个核心接口: 1.功能性接口(Function) public interface Function<T,R> ...
- 利用Fiddler模拟通过Dynamics 365的OAuth 2 Client Credentials认证后调用Web API
微软动态CRM专家罗勇 ,回复337或者20190521可方便获取本文,同时可以在第一间得到我发布的最新博文信息,follow me. 配置Dynamics 365 & PowerApps 支 ...
- mysql-操作篇
# ### mysqlctrl + l 清屏ctrl + c 终止[linux]service mysql start 启动mysqlservice mysql stop 停止mysqlservice ...
- MySQL 部署分布式架构 MyCAT (三)
配置垂直分表 修改 schema.xml (db1) cd /data/mycat/conf cp schema.xml schema.xml.rwh # 修改配置 vi schema.xml < ...
- 程序运行时间测试 - 使用libc 中 clock 函数
我们运行程序的时候,可以简单使用clock函数测试程序的运行时间:(本示例中以微秒为单位输出) https://github.com/yaowenxu/Workplace/blob/master/ti ...