Vue学习之--------列表排序（ffilter、sort、indexOf方法的使用）、Vue检测数据变化的原理（2022/7/15）
文章目录
1、列表排序
1.1 、代码实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>列表过滤</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器-->
<div id="root">
<h2>人员列表</h2>
<input type="text" placeholder="请输入名字" v-model="keyWord">
<button @click="sortType = 2">升序</button>
<button @click="sortType = 1">降序</button>
<button @click="sortType = 0">原顺序</button>
<ul>
<li v-for="(p,index) of filPerons" :key="p.id">
{{p.name}}-{{p.age}}-{{p.sex}}
</li>
</ul>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
//用computed实现
new Vue({
el: '#root',
data: {
keyWord: '',
sortType: 0,
persons: [
{ id: '001', name: '马冬梅', age: 43, sex: '女' },
{ id: '002', name: '周冬雨', age: 20, sex: '女' },
{ id: '003', name: '周杰伦', age: 51, sex: '男' },
{ id: '004', name: '温兆伦', age: 22, sex: '男' }
]
},
computed: {
filPerons() {
const arr = this.persons.filter((p) => {
alert(p.name.indexOf(this.keyWord) !== -1)
return p.name.indexOf(this.keyWord) !== -1
})
//判断是否要排序
if (this.sortType) {
arr.sort((p1, p2) => {
return this.sortType === 1 ? p2.age - p1.age : p1.age - p2.age
})
}
return arr
}
}
})
</script>
</html>
1.2 、测试效果
1.3、需要掌握的前提知识
filter()方法
sort()方法
2、Vue监测数据变化的原理
2.1、代码实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>标题</title>
<!-- 引入vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="App">
<h1>姓名:{{name}}</h1>
<h1>性别:{{student.name}}</h1>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示
//创建Vue实例
const vm = new Vue({
el: '#App',
data: {
name: "ZYZ",
sex: "man",
student:{
name:'张三',
sex:"男",
friends:[
{name:'李四',sex:"男"},
{name:'麻子',sex:"男"}
]
}
}
})
</script>
</body>
</html>
2.2 、测试效果
3、Vue检测数据的原理
3.1 基本知识
Vue监视数据的原理：
1、vue会监视data中所有层次的数据。
2、 如何监测对象中的数据？ 通过setter实现监视，且要在new Vue时就传入要监测的数据。
- (1).对象中后追加的属性，Vue默认不做响应式处理
- (2).如需给后添加的属性做响应式，请使用如下API：
Vue.set(target，propertyName/index，value) 或
vm.$set(target，propertyName/index，value)
- 如何监测数组中的数据？ 通过包裹数组更新元素的方法实现，本质就是做了两件事：
- (1).调用原生对应的方法对数组进行更新。
- (2).重新解析模板，进而更新页面。
4、在Vue修改数组中的某个元素一定要用如下方法：
- 1.使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
- 2.Vue.set() 或 vm.$set()
特别注意：Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象 添加属性！！！
3.2 代码实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>总结数据监视</title>
<style>
button {
margin-top: 10px;
}
</style>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h1>学生信息</h1>
<button @click="addFriend">在列表首位添加一个朋友</button> <br />
<h3>朋友们：</h3>
<ul>
<li v-for="(f,index) in student.friends" :key="index">
{{f.name}}--{{f.age}}
</li>
</ul>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
const vm = new Vue({
el: '#root',
data: {
student: {
name: 'tom',
age: 18,
friends: [
{ name: 'jerry', age: 35 },
{ name: 'tony', age: 36 }
]
}
},
methods: {
addFriend() {
this.student.friends.unshift({ name: 'jack', age: 70 })
},
}
})
</script>
</html>
3.3 测试效果
3.4 需要掌握的前提知识
Vue学习之--------列表排序（ffilter、sort、indexOf方法的使用）、Vue检测数据变化的原理（2022/7/15）的更多相关文章
- [python学习] 语言基础—排序函数(sort()、sorted()、argsort()函数)
python的内建排序函数有 sort.sorted两个. 1.基础的序列升序排序直接调用sorted()方法即可 ls = list([5, 2, 3, 1, 4]) new_ls = sorted ...
- Python习题之列表排序，4种方法
def sort_list_method_1(a): return sorted(a) print(sort_list_method_1([1, 4, 2])) def sort_list_metho ...
- Arrays的排序算法sort及方法使用
Java工具包中的Arrays工具类里面有数组的快速排序算法. 源码如下: /** * Sorts the specified range of the array using the given * ...
- Vue中Object和Array数据变化侦测原理
在学完Vue.js框架,完成了一个SPA项目后,一直想抽时间找本讲解Vue.js内部实现原理的书来看看,经过多方打听之后,我最后选择了<深入浅出Vue.js>这本书.然而惭愧的是,这本书已 ...
- 23.VUE学习之-列表的排序sort
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue学习之--------列表渲染、v-for中key的原理、列表过滤的实现（2022/7/13）
文章目录 1.基本列表 1.1 基本知识 1.2 代码实例 1.3 测试效果 2.key的原理 2.1基本知识 2.2 代码实例 2.3 测试效果 2.4 原理图解 3.列表过滤 3.1 代码实例 3 ...
- 【Redis】命令学习笔记——列表（list）+集合（set）+有序集合（sorted set）（17+15+20个超全字典版）
本篇基于redis 4.0.11版本,学习列表(list)和集合(set)和有序集合(sorted set)相关命令. 列表按照插入顺序排序,可重复,可以添加一个元素到列表的头部(左边)或者尾部(右边 ...
- [ActionScript 3.0] 对数组中的元素进行排序Array.sort()的方法
对数组中的元素进行排序. 此方法按 Unicode 值排序. (ASCII 是 Unicode 的一个子集.) 默认情况下,Array.sort()按以下方式进行排序: 1. 排序区分大小写(Z优先于 ...
- Vue学习笔记【5】——如何定义一个基本的Vue代码结构
插值表达式{{}} 和 v-text 默认 v-text 是没有闪烁问题的: v-text会覆盖元素中原本的内容,但是 插值表达式只会替换自己的这个占位符,不会把 整个元素的内容清空 v-cloak ...
随机推荐
- 万答17，AWS RDS怎么搭建本地同步库
欢迎来到 GreatSQL社区分享的MySQL技术文章,如有疑问或想学习的内容,可以在下方评论区留言,看到后会进行解答 背景说明 AWS RDS 权限受限,使用 mysqldump 的时候无法添加 - ...
- 完整代码：WTL_Freecell绿色版
WTL_Freecell是WTL编制的空当接龙绿色版,介绍参见:https://www.cnblogs.com/ybmj/p/11339911.html .这里提供WTL_Freecell的完整代码 ...
- Vnc自动登录器-多国语言绿色版
推荐:介绍一个VNC连接工具:iis7服务器管理工具.IIs7服务器管理工具可以批量连接并管理VNC服务器.作为服务器集成管理器,它最优秀的功能就是批量管理windows与linux系统服务器.vps ...
- 多线程与高并发（五）—— 源码解析 ReentrantLock
一.前言 ReentrantLock 是基于 AQS 实现的同步框架,关于 AQS 的源码在 这篇文章 已经讲解过,ReentrantLock 的主要实现都依赖AQS,因此在阅读本文前应该先了解 AQ ...
- PyCharm 2022.2 发布了，支持最新 Python 3.11 和 PyScript 框架！
来源:Jet Brains官网:翻译:Python猫 原文:https://blog.jetbrains.com/pycharm/2022/07/2022-2 通常而言,使用新潮的或者快速发展的技术, ...
- OpenStack-iaas之“先点”云平台安装
1.认识OpenStack 1.云计算的起源 早在2006年3月,亚马逊公司首先提出弹性计算云服务.2006年8月9日,谷歌公司首席执行官埃里克·施密特(Eric Schmidt)在谷歌搜索引擎大会( ...
- 记录第一次给开源项目提 PR
本文是深入浅出 ahooks 源码系列文章的第八篇,该系列已整理成文档-地址.觉得还不错,给个 star 支持一下哈,Thanks. 本篇文章算是该系列的一个彩蛋篇,记录一下第一次给开源项目提 PR ...
- Codeforces Round #585 (Div. 2) E. Marbles （状压DP），BZOJ大理石（同一道题）题解
题意 林老师是一位大理石收藏家,他在家里收藏了n块各种颜色的大理石,第i块大理石的颜色为ai.但是林老师觉得这些石头在家里随意摆放太过凌乱,他希望把所有颜色相同的石头放在一起.换句话说,林老师需要对现 ...
- [BZOJ3625][CF438E]小朋友和二叉树 （多项式开根，求逆）
题面 题解 设多项式的第a项为权值和为a的二叉树个数,多项式的第a项表示是否为真,即 则,所以F是三个多项式的卷积,其中包括自己: ,1是F的常数项,即. 我们发现这是一个一元二次方程,可以求出,因为 ...
- Filter（过滤器）、ThreadLocal（本地线程）、Listener（监听器）
Filter(过滤器) Filter过滤器它的作用是:拦截请求,过滤响应. 过滤器链 1)执行的顺序依次是: A B C Demo03 C2 B2 A2 2)如果采取的是注解的方式进行配置,那么过滤器 ...