七、ref引用与数组的常用方法
生活随笔
收集整理的這篇文章主要介紹了
七、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引用与数组的常用方法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： PO,VO,DAO,BO,POJO之间的
- 下一篇： BIT软件工程个人项目——数独sudok