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 ...
随机推荐
- mysql5.7介绍和安装
环境准备: 1.关闭防火墙和selinux systemctl stop firewalldsystemctl stop SElinux 2. 如果安装过mariadb需要停止且卸载服务 system ...
- FinClip小程序+Rust（三）：一个加密钱包
一个加密货币钱包,主要依赖加密算法构建.这部分逻辑无关iOS还是Android,特别适合用Rust去实现.我们看看如何实现一个生成一个模拟钱包,准备供小程序开发采用 前言 在之前的内容我们介绍了整 ...
- 移动应用开发迎来哪些新技术？5月24日相约HDD·线上沙龙·创新开发专场
HUAWEI Developer Day(简称HDD),是华为开发者联盟与广大开发者深度交流的平台.围绕移动终端的最新技术和产品形态,持续向广大开发者传递华为终端的最新产品和开放服务能力,结合最新的行 ...
- 136. Single Number - LeetCode
Question 136. Single Number Solution 思路:构造一个map,遍历数组记录每个数出现的次数,再遍历map,取出出现次数为1的num public int single ...
- MongoDB 体系结构与数据模型
每日一句 If no one else guards the world, then I will come forward. 如果没有别人保卫这个世界,那么我将挺身而出. 概述 MongoDB主要是 ...
- drools执行完某个规则后终止别的规则执行
目录 1.背景 2.需求 3.实现方案 1.通过Fact判断 2.通过全局变量判断 3.通过halt方法 4.实现上述需求 4.1 drl 文件编写 4.2 运行结果 5.完整代码 1.背景 在我们开 ...
- Go中rune类型浅析
一.字符串简单遍历操作 在很多语言中,字符串都是不可变类型,golang也是. 1.访问字符串字符 如下代码,可以实现访问字符串的单个字符和单个字节 package main import ( &qu ...
- Date类的常见用法——JavaSE基础
Date类的常见用法 Date类属于java.util包 因此需要导入Date类 Date() 分配一个Date对象,并初始化此对象为系统当前的日期和时间,可以精确到毫秒). Date(long da ...
- java中关于@override注解的使用
@Override是伪代码,表示重写,作用有:1.可以当注释用,方便阅读:2.编译器可以给你验证@Override下面的方法名是否是你父类中所有的,如果没有则报错.例如:如果想重写父类的方法,比如to ...
- 面试突击58：truncate、delete和drop的6大区别
在 MySQL 中,使用 truncate.delete 和 drop 都可以实现表删除,但它们 3 个的使用场景和执行效果完全不同,接下来我们来盘点一下. truncate.delete.drop区 ...