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 ...
随机推荐
- zabbix-agent python脚本侦听服务器异常登录，并告警
py脚本 import re,subprocess,time,datetime #gpasswd -a zabbix adm def ftime(a): a = a.replace('Jan','01 ...
- 使用VPLS跨地域多站点建立二层交换网络
VLL解决方案 https://www.cnblogs.com/darkchen/p/14652540.html 接上篇文档引出VPLS VLL可以跨地域建立二层交换网络,但有个缺陷是只支持两个sit ...
- 104_Power Query 数据库条件查询
博客:www.jiaopengzi.com 焦棚子的文章目录 请点击下载 1.应用场景 底层数据在数据库(sql server数据库,其他数据库同理,下文不再说明.)中,Excel中有查询的字段,需要 ...
- vue2 使用 swiper 轮播图效果
第一步.先安装swiper插件 npm install swiper@3.4.1 --save-dev 第二步.组件内引入swiper插件 import Swiper from 'swiper' im ...
- swiper使用
swiper使用 初始化 var mySwiper = new Swiper ('容器区域类', { // 存放swiper属性 }) 属性 基本属性: 1.initialSlide 设定初始化时sl ...
- 纯CSS如何禁止用户复制网页的内容？
大家好,我是半夏,一个刚刚开始写文的沙雕程序员.如果喜欢我的文章,可以关注 点赞 加我微信:frontendpicker,一起学习交流前端,成为更优秀的工程师-关注公众号:搞前端的半夏,了解更多前端知 ...
- Pandas复杂查询、数据类型转换、数据排序
Pandas高级操作 1.复杂查询 (1)逻辑运算 以DataFrame其中一列进行逻辑计算,会产生一个对应的bool值组成的Series 于是我们可以利用返回的bool列表进行一系列的数据查询 (2 ...
- linux挂载新硬盘并进行分区格式化
最近要给小伙伴们写几篇文章,关于<linux下误删除文件之后该如何恢复>.对于没有进程占用的文件想要进行数据恢复,不同的文件系统格式需要使用不同的工具,比如:ext4.xfs等.我找遍了我 ...
- 物联网无线数传通信模块设备常见的几种Modbus网关
物联网无线数传通信常见的几种Modbus网关 以下提到Modbus网关均指Modbus RTU转Modbus TCP,并不涉及对Modbus ASCII数据帧的处理,Modbus ASCII仅支持透明 ...
- Nginx安装及支持https代理配置和禁用TSLv1.0、TSLv1.1配置
Linux安装Nginx Nginx安装及支持https代理配置和禁用TSLv1.0.TSLv1.1配置. 下载安装包 [root@localhost ~]# wget http://nginx.or ...