七、ref引用与数组的常用方法
一、ref
引用
1.1、什么是 ref 引用
ref 用来辅助开发者在不依赖于jQuery的情况下
,获取 DOM 元素或组件的引用。
每个vue的组件实例上,都包含一个$refs对象
,里面存储着对应的 DOM 元素或组件的引用。默认情况下,组件的$refs指向一个空对象
。
1.2、使用ref引用 DOM 元素
如果想要使用 ref 引用页面上的 DOM 元素
,则可以按照如下的方式进行操作:
1.3、使用ref引用组件实例
如果想要使用ref引用页面上的组件实例
,则可以按照如下的方式进行操作:
1.4、控制文本框和按钮的按需切换
通过布尔值inputVisible
来控制组件中的文本框与按钮的按需切换。示例代码如下:
1.5、让文本框自动获取焦点
当文本框展示出来之后,如果希望它立即获得焦点,则可以为其添加ref引用,并调用原生 DOM 对象的 .focus()
方法即可。示例代码如下:
1.6、this.$nextTick
(cb)方法
组件的$nextTick(cb)
方法,会把 cb 回调 推迟到下一个 DOM 更新周期之后执行
。通俗的理解是:等组件的 DOM 更新完成之后,再执行 cb 回调函数。从而能保证 cb 回调函数可以操作到最新的 DOM 元素。
二、数组的常用方法
2.1、forEach()
方法
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>const arr = ['张三','李四','王五','赵六']// forEach 循环一旦开始,无法在中间被停止arr.forEach((item, index) => {console.log(item)if(item === '王五') {console.log(index)}})</script>
</body>
</html>
2.2、some()
方法
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>const arr = ['张三','李四','王五','赵六']arr.some((item, index) => {console.log(item)if(item === '王五') {console.log(index)// 在找到对应的项之后,可以通过 return true 固定的语法,来终止 some 循环return true}})</script>
</body>
</html>
2.3、every()
方法
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>const arr = [{ id: 1, name: '西瓜', state: true },{ id: 2, name: '榴莲', state: false },{ id: 3, name: '草莓', state: true },]// 需求:判断数组中,水果是否被全选了!const result = arr.every(item => item.state)console.log(result)</script>
</body>
</html>
2.4、filter()
方法
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>const arr = [{ id: 1, name: '西瓜', state: true, price: 10, count: 1 },{ id: 2, name: '榴莲', state: false, price: 80, count: 2 },{ id: 3, name: '草莓', state: true, price: 20, count: 3 },]// 需求:把购物车数组中,已勾选的水果,总价累加起来!let amt = 0 // 总价arr.filter(item => item.state).forEach(item => {amt += item.price * item.count})console.log(amt)</script>
</body></html>
2.5、reduce()
方法
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>const arr = [{ id: 1, name: '西瓜', state: true, price: 10, count: 1 },{ id: 2, name: '榴莲', state: true, price: 80, count: 2 },{ id: 3, name: '草莓', state: false, price: 20, count: 3 },]// arr.filter(item => item.state).reduce((累加的结果, 当前循环项) => { }, 初始值)const result = arr.filter(item => item.state).reduce((amt, item) => amt += item.price * item.count, 0)console.log(result)</script>
</body></html>
七、ref引用与数组的常用方法相关推荐
- 生命周期数据共享[父子-子父-兄弟]ref引用数组复习
目录 一.组件的生命周期& 生命周期函数 1. 生命周期 & 生命周期函数 2.组件生命周期函数的分类 3.生命周期图示[重要] 二.组件之间的数据共享 1. 组件之间的关系 2. 父 ...
- Nwafu-Oj-1444 Problem l C语言实习题七——2.结构体数组的定义与引用
问题 : C语言实习题七--2.结构体数组的定义与引用 时间限制: 1 Sec 内存限制: 128 MB 提交: 4459 解决: 2011 [提交][状态][讨论版] 题目描述 定义一个职工结构 ...
- java引用数组长度_如何引用Java数组的长度
如何引用Java数组的长度 答:数组名.length 病人先有高热大汗.面赤.口渴饮.脉洪大,后突然出现面色苍白,四肢厥冷,脉微欲绝,此属于() 答:热证转寒 中国大学MOOC: 下列属于病原生物侵染 ...
- 前端面试题总结之数组的常用方法(一)
数组的常用方法有 Join split push pop unshift shift reverse sort 一.Join 就是将数组转化为字符串 arr.join("符号" ...
- Unit05: 创建和访问数组 、 数组的常用方法_1
1.数组: 程序=数据结构+算法: 数据:变量... 算法:if if-else switch 循环........ 好的数据结构,可极大提高程序的执行"效率":相关的多个数据应集 ...
- 集合——对象数组(引用数据类型数组)
案例:我有5个学生,请把这个5个学生的信息存储到引用数据类型数组中,并遍历数组,获取得到每一个学生的信息. 思路分析:首先,想要创建学生对象,就得有学生这个类,所以,首先创建一个包(package c ...
- c语言程序定义不知数量的一维数组,c语言程序设计10-第6章 利用数组处理批量数据 6.1 怎样定义和引用一维数组.ppt...
c语言程序设计10-第6章 利用数组处理批量数据 6.1 怎样定义和引用一维数组 * 临沂大学汽车学院:韩晓翠 第6章 利用数组处理批量数据 6.1 怎样定义和引用一维数组 授课要点 数组的概念 一维 ...
- 怎样定义和引用一维数组,二维数组
s1,s2,s3,...,s30 右下角的数字称为下标(subscript) 一批具有同名的同属性的数据就组成了一个数组(array),s就是数组名. 1.怎样定义和引用一维数组 一维数组.二维数组. ...
- vue.js踩坑之ref引用细节点
vue.js组件之H5页面,DOM标签或者组件中,通过ref="自定义name名称"引用的细节点 要点简介:[ 见下文案例 ] 使用is=" "解决H5出现的标 ...
最新文章
- BZOJ 2132 圈地计划(最小割)【BZOJ 修复工程】
- java代码_Java:java五行代码实现Excel的快速导出
- leetcode算法题--乘积最大子数组
- tensorflow 训练权重不更新_TensorFlow模型剪枝原理
- 的工作空间查看_【工作推荐】裱花师、现金会计、汽车维修等热门岗位汇总!...
- 向ArcMap添加未出现的工具 如planarize lines
- go gorm框架一对多查询代码示例
- jmeter+Fiddler:通过Fiddler抓包生成jmeter脚本
- github删除已经push到服务器上的commit的方法
- Java基础学习总结(81)——如何尽可能的减少Java代码中bug
- 前端实现照片选取范围上传_前端代码是怎样智能生成的?看看大佬怎么说
- K2 Blackpearl中从数据库直接删除流程实例之K2Server表
- hql懒加载后判断对象是否存在_JPA数据懒加载LAZY和实时加载EAGER(二) - Mr.Simm - 博客园...
- linux如何显示前一天日期,在linux显示昨天(前一天)的日期
- 软件需求说明书/ 概要设计说明书/项目开发计划/详细设计说明书(说明要点及要点解释)
- css三大样式(行内样式)
- Unity 透视相机世界和屏幕坐标系转换
- 【Java】Feil类概述
- Android实现直播的博文和流程(全过程,超详细/附源码)
- 2021年创新实践部第一次培训电脑拆装总结