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 ...
随机推荐
- 【Java分享客栈】未来迈向高级工程师绕不过的技能：JMeter压测
前言 因为工作需要,久违的从自己的有道云笔记中去寻找压测相关的内容,翻开之后发现还不错,温故一遍后顺便整理出来分享给大家. 题外话,工作8年多,有道云笔记不知不觉都6G多了,扫一眼下来尽是云烟过往,竟 ...
- Vagrant之CentOS
Vagrant之CentOS Vagrant官网 https://www.vagrantup.com https://app.vagrantup.com/boxes/search https://ap ...
- 「NOI2019」序列
NKOJ卡常卡不过QAQ description 给两个A,B序列,让你分别在A,B中各选k个数,其中至少有L对下标相等. Solution 把问题转化为至多选n-K对下标不同的对. 配对问题就用费用 ...
- Spring Ioc源码分析系列--Bean实例化过程(二)
Spring Ioc源码分析系列--Bean实例化过程(二) 前言 上篇文章Spring Ioc源码分析系列--Bean实例化过程(一)简单分析了getBean()方法,还记得分析了什么吗?不记得了才 ...
- 『忘了再学』Shell基础 — 28、AWK中条件表达式说明
目录 1.AWK的条件表达 2.条件表达式说明 (1)BEGIN (2)END (3)关系运算符 (4)说明AWK中条件表达式的执行过程 (5)AWK中使用正则表达式 (6)A~B练习 1.AWK的条 ...
- 基于数传电台的组态王控制实现远程采集控制器PLC
「物联网应用案例」基于数传电台的组态王控制 一．案例介绍 采用亚控科技组态王结合亿佰特E90系列数传电台实现远程采集控制PLC.在这里主要介绍通信环境的搭建,故不采用过于复杂的控制程序,但为了体现控制 ...
- 老子云AMRT全新三维格式正式上线，其性能全面超越现有的三维数据格式
9月16日,老子云AMRT全新三维格式正式上线,其性能远超现有的三维数据格式.目前已有含国家超算长沙中心.中科院空间所.中车集团等上百家政企事业单位的项目中使用了AMRT格式,大大提升了可视化项目的开 ...
- iNeuOS工业互联网操作系统，视图建模(WEB组态)增加2154个行业矢量图元、大屏背景及相关图元
1. 概述 现在三维数字孪生(3D)比较流行,各行业各领域的项目也都在上数字孪生项目或是项目中包括数字孪生模块,能做的厂家也很多.从全厂区的应用视觉的冲击力还是比较震撼,但是数字孪生不太可能包括 ...
- WPF开发随笔收录-报警闪烁效果实现
一.前言 工作中目前经手的项目是医疗相关的监护软件,所以会涉及到一些报警效果的实现,今天在这里就简单分享一下实现方式 二.正文 1.实现的方式比较的简单,就是通过一个Border控件,然后搭配Data ...
- 【RPA之家BluePrism手把手教程】2.3 多重计算
2.3.1 添加除法运算计算框 2.3.2 设置除法运算计算属性 2.3.3 程序运行前初始值 2.3.4 程序运行后结果 使用多重计算框实现以上操作 2.3.5 添加多重选择框 2.3.6 设置多重 ...