新聞中心
這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
創(chuàng)新互聯(lián)VUE3教程:Vue3.0v-for中的Ref數(shù)組
在 Vue 2 中,在 v-for 里使用的 ref attribute 會用 ref 數(shù)組填充相應的 $refs property。當存在嵌套的 v-for 時,這種行為會變得不明確且效率低下。

讓客戶滿意是我們工作的目標,不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶,將通過不懈努力成為客戶在信息化領域值得信任、有價值的長期合作伙伴,公司提供的服務項目有:域名注冊、網(wǎng)頁空間、營銷軟件、網(wǎng)站建設、宜城網(wǎng)站維護、網(wǎng)站推廣。
在 Vue 3 中,這樣的用法將不再在 $ref 中自動創(chuàng)建數(shù)組。要從單個綁定獲取多個 ref,請將 ref 綁定到一個更靈活的函數(shù)上 (這是一個新特性):
結(jié)合選項式 API:
export default {
data() {
return {
itemRefs: []
}
},
methods: {
setItemRef(el) {
this.itemRefs.push(el)
}
},
beforeUpdate() {
this.itemRefs = []
},
updated() {
console.log(this.itemRefs)
}
}結(jié)合組合式 API:
import { ref, onBeforeUpdate, onUpdated } from 'vue'
export default {
setup() {
let itemRefs = []
const setItemRef = el => {
itemRefs.push(el)
}
onBeforeUpdate(() => {
itemRefs = []
})
onUpdated(() => {
console.log(itemRefs)
})
return {
itemRefs,
setItemRef
}
}
}注意:
itemRefs不必是數(shù)組:它也可以是一個對象,其 ref 會通過迭代的 key 被設置。- 如果需要,
itemRef也可以是響應式的且可以被監(jiān)聽。
分享題目:創(chuàng)新互聯(lián)VUE3教程:Vue3.0v-for中的Ref數(shù)組
鏈接地址:http://m.5511xx.com/article/djojjcc.html


咨詢
建站咨詢
