Vue 基本列表 && 数据过滤与排序
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8" />
5 <title>Vue 基本列表</title>
6 <script type="text/javascript" src="../js/vue.js"></script>
7 </head>
8 <body>
9 <!--
10 v-for指令
11 1.用于展示列表数据
12 2.语法：v-for="(item, index) in xxx" key="index"
13 3.可表里：数组、对象、字符串（用的很少）、指定次数（用的很少）
14 -->
15 <div id="root">
16 <h2>人员列表(遍历数组)</h2>
17 <ul>
18 <li v-for="(p, index) in persons" :key="index">
19 {{p.name}}-{{p.age}}
20 </li>
21 </ul>
22
23 <h2>汽车信息(遍历对象)</h2>
24 <ul>
25 <li v-for="(c, key) in car" :key="key">
26 {{c}}-{{key}}
27 </li>
28 </ul>
29
30 <h2>遍历字符串(用的少)</h2>
31 <ul>
32 <li v-for="(char, index) of str" :key="index">
33 {{char}}-{{index}}
34 </li>
35 </ul>
36
37 <h2>遍历次数(用的少)</h2>
38 <ul>
39 <li v-for="(number, index) of 5" :key="index">
40 {{number}}-{{index}}
41 </li>
42 </ul>
43 </div>
44 </body>
45
46 <script type="text/javascript" >
47 Vue.config.productionTip = false;// 阻止 vue 在启动时生成生产提示。
48 let vm = new Vue({
49 el: "#root",
50 data:{
51 persons:[
52 {id:"001",name:"张三",age:18},
53 {id:"002",name:"李四",age:19},
54 {id:"003",name:"王五",age:20}
55 ],
56 car:{
57 name:"奥迪A6",
58 price:"70w",
59 color:"黑色"
60 },
61 str: "hello"
62 },
63 });
64 </script>
65 </html>
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8" />
5 <title>Vue 数据过滤与排序</title>
6 <script type="text/javascript" src="../js/vue.js"></script>
7 </head>
8 <body>
9 <div id="root">
10 <h2>人员信息</h2>
11 <input type="text" v-model="keyWord" />
12 <button @click="orderType = 1">年龄降序</button>
13 <button @click="orderType = 2">年龄升序</button>
14 <button @click="orderType = 0">默认升序</button>
15 <ul>
16 <li v-for="(p, index) in showPersons" :key="p.id">
17 {{p.name}}-{{p.age}}-{{p.sex}}
18 </li>
19 </ul>
20 </div>
21 </body>
22
23 <script type="text/javascript" >
24 Vue.config.productionTip = false;// 阻止 vue 在启动时生成生产提示。
25 // let vm = new Vue({
26 // el: "#root",
27 // data:{
28 // keyWord: '',
29 // persons:[
30 // {id:"001",name:"马冬梅",age:18,sex:"女"},
31 // {id:"002",name:"周冬雨",age:19,sex:"女"},
32 // {id:"003",name:"周杰伦",age:20,sex:"男"},
33 // {id:"004",name:"温兆伦",age:21,sex:"男"},
34 // ],
35 // showPersons:[]
36 // },
37 // watch:{
38 // keyWord(nval, oval){
39 // this.showPersons = this.persons.filter((p)=>{
40 // return p.name.indexOf(nval) !== -1;
41 // });
42 // console.log(this.showPerson)
43 // }
44 // }
45 // });
46 let vm = new Vue({
47 el: "#root",
48 data:{
49 keyWord: '',
50 persons:[
51 {id:"001",name:"马冬梅",age:18,sex:"女"},
52 {id:"002",name:"周冬雨",age:17,sex:"女"},
53 {id:"003",name:"周杰伦",age:20,sex:"男"},
54 {id:"004",name:"温兆伦",age:216,sex:"男"},
55 ],
56 orderType: 0
57 },
58 computed:{
59 showPersons(){
60 const arr = this.persons.filter((p)=>{
61 return p.name.indexOf(this.keyWord) !== -1;
62 });
63 if (this.orderType){
64 arr.sort((a,b)=>{ // 排序
65 return this.orderType === 1 ? b.age - a.age : a.age - b.age;
66 });
67 }
68 return arr;
69 }
70 }
71 });
72 </script>
73 </html>
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8" />
5 <title>Vue 过滤器</title>
6 <script type="text/javascript" src="../js/vue.js"></script>
7 <script type="text/javascript" src="../js/day.min.js"></script>
8 </head>
9 <body>
10 <!--
11 过滤器：
12 定义：对要显示的数据进行特定格式化后再显示（适用与一些简单逻辑的处理
13 语法：
14 .注册过滤器： Vue.filter(name, callback) 或者 new Vue(filters:{})
15 .使用过滤器：{{xxx | 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器名"
16 备注：
17 .过滤器也可以接受额外的参数，多个过滤器也可以串联
18 .并没有改变原本的数据，是产生新的对应的数据
19
20 -->
21 <div id="root">
22 <h2>显示格式化后的时间</h2>
23 <!-- 计算属性实现 -->
24 <h3>现在是：{{fmtTime}}</h3>
25 <!-- methods实现 -->
26 <h3>现在是：{{getFmtTime()}}</h3>
27 <!-- 过滤器实现 -->
28 <h3>现在是：{{time | timeFormater}}</h3>
29 <!-- 过滤器传参实现 -->
30 <h3>现在是：{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h3><br />
31 <h3 :x="msg || mySlice">BaiYeShu</h2>
32 </div>
33
34 <div id="root1">
35 <h2>{{msg | mySlice}}</h2>
36 </div>
37 </body>
38
39 <script type="text/javascript" >
40 Vue.config.productionTip = false;// 阻止 vue 在启动时生成生产提示。
41 Vue.filter('mySlice', function (str){ // 添加全局过滤器，所有Vue对象可以使用
42 return str.slice(0, 4);
43 });
44
45 new Vue({
46 el: '#root1',
47 data:{
48 msg: 'BaiYeShu'
49 }
50 });
51
52 let vm = new Vue({
53 el: "#root",
54 data:{
55 time: 1653459294092,
56 msg: 'BaiYeShu'
57 },
58 computed:{
59 fmtTime(){
60 return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss');
61 }
62 },
63 filters:{ // 这里是局部过滤器，只有当前mv中可以使用
64 timeFormater(value, str='YYYY-MM-DD HH:mm:ss'){
65 return dayjs(this.time).format(str);
66 }
67 },
68 methods:{
69 getFmtTime(){
70 return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss');
71 }
72 }
73 });
74 </script>
75 </html>
Vue 基本列表 && 数据过滤与排序的更多相关文章
- VUE：列表的过滤与排序
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- pandas练习（二）------ 数据过滤与排序
数据过滤与排序------探索2012欧洲杯数据 相关数据见(github) 步骤1 - 导入pandas库 import pandas as pd 步骤2 - 数据集 path2 = ". ...
- 使用vuex做列表数据过滤
功能需求 展示一个表格,表格包含选项有" 姓名 年龄 是否显示"三个列表项 是否显示列表项是可操作开关,点击切换打开/关闭 将表格中开关为打开状态的列表项,在另一个表格中显示 需求 ...
- salesforce 零基础学习（六十三）Comparable实现Object列表数据的自定义排序
项目中通常有些需求为需要将某个sObject的数据列表按照某种规则排序显示到前台页面上,但是list上面的sort远远满足不了复杂的功能,此种情况需要自定义比较两个object大小的方法,所以需要创建 ...
- 为什么你需要在用 Vue 渲染列表数据时指定 key
本文改写整理自一篇博文,原文链接如下: Why you should use the key directive in Vue.js with v-for Application state and ...
- Vue.js的列表数据的同步更新方法
这次给大家带来Vue.js的列表数据的同步更新方法,Vue.js列表数据同步更新方法的注意事项有哪些,下面就是实战案例,一起来看一下. 数组的 push(),pop(),shift(),unshift ...
- Vue数组更新及过滤排序
前面的话 Vue为了增加列表渲染的功能,增加了一组观察数组的方法,而且可以显示一个数组的过滤或排序的副本.本文将详细介绍Vue数组更新及过滤排序 变异方法 Vue 包含一组观察数组的变异方法,它们将会 ...
- 使用keepAlive对上下拉刷新列表数据 和 滚动位置细节处理 - vue
[前言] 使用vue处理项目中遇到列表页面时,之前项目中总会有一些细节问题处理得不太好,这里总结一下,以便优化以后的代码.如下: 1. 使用mint-ui中的LoadMore组件上下拉刷新时,有时无法 ...
- Atitit 列表表格按照字段排序数据解决方案
Atitit 列表表格按照字段排序数据解决方案 1.1. 排序ui1 1.1.1. C:\Users\Administrator\Desktop\00oa\com.attilax\ui\orderAr ...
随机推荐
- MinIO学习
1.Minio及背景 Minio是一个开源的分布式文件存储系统,它基于 Golang 编写,虽然轻量,却拥有着不错的高性能,可以将图片.视频.音乐.pdf这些文件存储到多个主机,可以存储到多个Linu ...
- Kube-OVN v1.10.0：新增Windows节点支持，用户自定义子网ACL等10+硬核功能
在Kube-OVN社区小伙伴的共同努力下,Kube-OVN v1.10.0于五月份正式发布.Kube-OVN v1.10.0版本中,我们一如既往地对Kube-OVN 的功能.性能.稳定性和易用性进行了 ...
- Redis（1）- Redis数据库的安装和配置
1.Redis安装 1.1.Linux环境安装Redis step-1:下载Redis 进入官网找到下载地址 https://redis.io/download wget https://github ...
- .net 获取IP地址的几种方式
1.获取服务器IP地址: 1) Local_Addr var Local_Addr = Request.ServerVariables.Get("Local_Addr").ToSt ...
- 【Unity Shader学习笔记】Unity光照基础-半兰伯特光照
在光照无法达到的区域,模型的外观通常是全黑的,没有任何明暗变化,这会使模型的背光区域看起来就像一个平面. 使用半兰伯特光照可以解决这个问题. 逐顶点光照技术也被称为兰伯特光照模型.因为它符合兰伯特定律 ...
- java和.net 双语言开发框架，开源的PaaS平台
当下,我国国内的PaaS平台正在蓬勃发展,各式各样的PaaS平台层出不穷,但万变不离其宗,一个优秀的PaaS平台总有自己独树一帜或与众不同的地方.那么,首先我们要了解下什么是PaaS平台?PaaS是( ...
- C语言- 基础数据结构和算法 - 09 栈的应用_中缀表达式转后缀表达式20220611
09 栈的应用_中缀表达式转后缀表达式20220611 听黑马程序员教程<基础数据结构和算法 (C版本)>, 照着老师所讲抄的, 视频地址https://www.bilibili.com/ ...
- 20天等待，申请终于通过，安装和体验IntelliJ IDEA新UI预览版
欢迎访问我的GitHub 这里分类和汇总了欣宸的全部原创(含配套源码):https://github.com/zq2599/blog_demos 关于IDEA的预览版 IDEA会启用新的UI,这事情之 ...
- Operator介绍
一.Operator简介 在Kubernetes中我们经常使用Deployment.DaemonSet.Service.ConfigMap等资源,这些资源都是Kubernetes的内置资源,他们的创建 ...
- Spring框架系列(6) - Spring IOC实现原理详解之IOC体系结构设计
在对IoC有了初步的认知后,我们开始对IOC的实现原理进行深入理解.本文将帮助你站在设计者的角度去看IOC最顶层的结构设计.@pdai Spring框架系列(6) - Spring IOC实现原理详解 ...