如何在Vue.js中使用ref获取ul下的所有li列表项？

嘿，我来帮你搞定这个问题！其实你已经离答案很近了——this.$refs.listOfItems拿到的就是原生的DOM元素，所以你完全可以直接用原生DOM的方法来获取它下面的li，这也是Vue推荐的方式，不需要额外的Vue专属API。

下面给你几种实用的方法，结合你的示例代码来看：

方法1：使用querySelectorAll（最灵活） #

这个方法可以通过CSS选择器精准匹配子元素，适合复杂场景：

<template>
  <ul id="listOfItems" ref="listOfItems">
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [{ id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }]
    }
  },
  mounted() {
    const ul = this.$refs.listOfItems;
    // 获取所有li元素，返回NodeList
    const lis = ul.querySelectorAll('li');
    // 如果需要转成数组方便操作
    const liArray = Array.from(lis);
    console.log(liArray);
  }
}
</script>

方法2：使用children属性（直接子元素） #

因为li是ul的直接子元素，用children属性可以直接拿到所有子元素（返回HTMLCollection）：

mounted() {
  const ul = this.$refs.listOfItems;
  // 获取所有直接子li元素
  const lis = ul.children;
  // 转成数组
  const liArray = Array.from(lis);
  console.log(liArray);
}

注意事项 #

• 确保在mounted钩子中获取：因为mounted阶段组件已经挂载完成，DOM已经渲染，能拿到所有v-for生成的li。
• 如果你的items是异步加载的（比如从接口获取），需要在数据更新后等待DOM渲染完成再获取，可以用this.$nextTick()：

async mounted() {
  // 模拟异步获取数据
  this.items = await fetchYourData();
  // 等待DOM更新
  await this.$nextTick();
  const ul = this.$refs.listOfItems;
  const lis = ul.querySelectorAll('li');
  console.log(lis);
}

简单来说，Vue的$refs只是帮你快速拿到原生DOM节点，剩下的DOM操作就可以用你熟悉的原生JS方法来完成，这也是Vue和原生JS协作的常见方式~

内容的提问来源于stack exchange，提问作者Syed