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 ...
随机推荐
- 免费yum源镜像地址
收集的镜像,yum源等网站地址 阿里巴巴开源镜像站 https://opsx.alibaba.com/mirror http://mirrors.aliyun.com/centos/ 网易开源镜像站 ...
- 运维：ITSM
IT服务管理(ITSM)是一套帮助企业对IT系统的规划.研发.实施和运营进行有效管理的方法,是一套方法论.ITSM起源于ITIL(IT Infrastructure Library,IT基础架构标准库 ...
- 665. Non-decreasing Array - LeetCode
Question 665. Non-decreasing Array Solution 题目大意: 思路:当前判断2的时候可以将当前元素2变为4,也可以将上一个元素4变为2,再判断两变化后是否满足要求 ...
- 项目中导入本地jar包问题
1. 问题 一个Maven项目,需要依赖一个本地jar包,以如下方式引用: <dependency> <groupId>xxx.sdk</groupId> < ...
- 腾讯云Redis全面升级，性能提升400%，可用性高达5个9
2022年6月,腾讯云Redis全新升级,发布高性能版本,单节点可提供50W+吞吐,性能是原生Redis的4倍.同时,腾讯云Redis推出全球复制功能,解决原生Redis诸多痛点问题,可用性升级高达9 ...
- nginx 部署前端资源的最佳方案
前言 最近刚来一个运维小伙伴,做线上环境的部署的时候,前端更新资源后,总是需要清缓存才能看到个更新后的结果.客户那边也反馈更新了功能,看不到. 方案 前端小伙伴应该都知道浏览器的缓存策略,协商缓存和强 ...
- Training loop Run Builder
以下内容来自deeplizard pyorch_P31
- 第6章 字符串（下）——C++字符串
6.5 C++ strings(C++字符串) C风格字符串常见错误:试图去访问数组范围以外的元素:没有使用函数strcpy( )来实现字符串之间的复制:没有使用函数strcmp( )来比较两个字符串 ...
- vue华视电子身份证阅读器的使用
ie还是谷歌都是可以用的 只需要直接启用华视电子身份证阅读器的服务来的,至于服务已经上传到了网上 华视阅读器服务,下载下来解压,找到对应的华视电子读卡服务.exe文件,路径是CVR-1 ...
- 《Java笔记——基础语法》
Java笔记--基础语法 一.字符串的拼接: 例如: System.out.println(""+""); 二.换行语句: 例如: Syst ...