Vue根据数据字段大小进行排列
时间:2022-07-24
本文章向大家介绍Vue根据数据字段大小进行排列,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script type="text/javascript" src="http://cdn.suoluomei.com/common/js2.0/vue/v2.5.16/vue.js"></script>
<title>v-for</title>
</head>
<body>
<h1>v-for</h1>
<hr>
<div id="app">
<ul>
<li v-for="item in tidis">{{ item }}</li>
</ul>
<hr>
<ul>
<!-- index是索引值 -->
<li v-for="(student,index) in sortStudent">
{{index+1}}:{{student.name}} - {{student.age}}
</li>
</ul>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
items: [66, 90, 146, 189, 124, 78, 44, 119],
students: [{
name: 'limeng',
age: 25
},
{
name: 'lili',
age: 23
},
{
name: 'yuyue',
age: 20
},
{
name: 'linlin',
age: 33
}
]
},
// computed计算属性,是在渲染数据之前进行的操作,在这里我们进行排序
computed: {
// 在computed里新声明一个对象,如果不重新声明会污染原来的数据源,这是vue不允许的,所以需要重新声明一个对象,但是在上面循环的时候,要改变循环的对象
tidis: function () {
// 在sort函数中传入自己的自己编写的数据排序的函数
return this.items.sort(sortNumber);
},
sortStudent: function () {
return sortByKey(this.students, 'age');//将studet数组中的数据按照年龄进行排序
}
}
});
//不要写在methods里面
// 普通数据的排序方法
function sortNumber(a, b) {
return a - b
}
//数组对象方法排序:
function sortByKey(array, key) {
return array.sort(function (a, b) {
var x = a[key];
var y = b[key];
return ((x < y) ? -1 : ((x > y) ? 1 : 0));
});
}
</script>
</body>
</html>
- 如何通过jq和php实现返回父级页面(附带记忆功能)
- springmvc下载文件
- PHP获取URL地址的一些坑
- 使用ResourceBundle读取配置文件
- 关于exp statistics的问题和简单测试(82天)
- laravel访问路由在nginx服务器上无法处理
- How Tomcat Works, A Guide to Developing Your Own Java Servlet Container
- 【开发指南】如何为nexus 5编译固件
- 支持向量机(SVM)入门详解(续)与python实现
- 数据库
- 关于Bom头的一些坑
- 使用shell脚本查看数据库负载情况(81天)
- 无法连接远程mysql数据库解决方案
- 归档问题导致的数据库无法启动 (80天)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Android开发之图片旋转功能实现方法【基于Matrix】
- Android编程简单实现拨号器功能的方法
- win10 + Ubuntu20.04 LTS双系统引导界面美化
- Android开发从相册中选取照片的示例代码
- 详解Android WebView的input上传照片的兼容问题
- Ubuntu14.04安装、配置与卸载QT5的步骤详解
- CentOS 8 安装 MariaDB的详细教程
- Android中RecyclerView拖拽、侧删功能的实现代码
- Android单个RecyclerView实现列表嵌套的效果
- Android如何禁止向EditText控件中输入内容详解
- 小程序视角下同构方案思考
- Android基于自带的DownloadManager实现下载功能示例
- Linux服务器搭建nvidia-docker环境过程详解
- Android开发中libs和jinLibs文件夹的作用详解
- Android多线程之同步锁的使用