Vue.js 是一個(gè)流行的前端框架，它提供了許多強(qiáng)大的特性來(lái)簡(jiǎn)化前端開發(fā)。其中之一是 v-for 指令，它可以循環(huán)遍歷一個(gè)數(shù)組或?qū)ο蟛秩镜?DOM 中。在某些情況下，你可能需要獲取到循環(huán)元素的屬性或內(nèi)容，比如需要對(duì)每個(gè)元素執(zhí)行一些操作。本文將介紹如何使用 Vue.js 獲取 v-for 元素的內(nèi)容。

我們可以通過(guò)在 v-for 元素中使用 ref 屬性來(lái)獲取元素的引用。ref 是 Vue.js 提供的一個(gè)特殊屬性，可用于在組件中注冊(cè)對(duì)應(yīng)的 DOM 元素或子組件。下面是一個(gè)簡(jiǎn)單的例子：

<template>
<div v-for="item in items" :key="item.id" ref="itemRefs">
{{item.name}}
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, name: 'Vue.js' },
{ id: 2, name: 'React' },
{ id: 3, name: 'Angular' }
]
};
},
mounted() {
const itemRefs = this.$refs.itemRefs;
console.log(itemRefs);
}
};
</script>

在上面的代碼中，我們?cè)诿總€(gè) v-for 元素上添加了 ref 屬性并命名為 "itemRefs"。然后在 mounted 生命周期鉤子函數(shù)中獲取到所有的 "itemRefs" 元素并打印到控制臺(tái)中。注意到我們使用 this.$refs.itemRefs 來(lái)獲取元素的引用。

最后，我們可以在獲取到元素的引用后通過(guò)訪問(wèn)其 innerHTML 或 textContent 屬性來(lái)獲取元素的內(nèi)容。例如：

mounted() {
const itemRefs = this.$refs.itemRefs;
itemRefs.forEach(itemRef => {
console.log(itemRef.innerHTML);
});
}

通過(guò)遍歷每個(gè)元素的引用并訪問(wèn)其 innerHTML 屬性，我們可以獲取到每個(gè) v-for 元素的內(nèi)容。