建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
創(chuàng)新互聯(lián)VUE3教程：Vue3.0v-for中的Ref數(shù)組
在 Vue 2 中，在 v-for 里使用的 ref attribute 會(huì)用 ref 數(shù)組填充相應(yīng)的 $refs property。當(dāng)存在嵌套的 v-for 時(shí)，這種行為會(huì)變得不明確且效率低下。
讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對(duì)這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡(jiǎn)單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：域名注冊(cè)、網(wǎng)頁空間、營(yíng)銷軟件、網(wǎng)站建設(shè)、宜城網(wǎng)站維護(hù)、網(wǎng)站推廣。
在 Vue 3 中，這樣的用法將不再在 $ref 中自動(dòng)創(chuàng)建數(shù)組。要從單個(gè)綁定獲取多個(gè) ref，請(qǐng)將 ref 綁定到一個(gè)更靈活的函數(shù)上 (這是一個(gè)新特性)：
結(jié)合選項(xiàng)式 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ù)組：它也可以是一個(gè)對(duì)象，其 ref 會(huì)通過迭代的 key 被設(shè)置。- 如果需要，
itemRef也可以是響應(yīng)式的且可以被監(jiān)聽。
當(dāng)前文章：創(chuàng)新互聯(lián)VUE3教程：Vue3.0v-for中的Ref數(shù)組
文章路徑：http://m.fisionsoft.com.cn/article/djojjcc.html
