vueuse中的useTemplateRefsList

在 v-for 中绑定 ref 到模板元素和组件的简写方式

Demo1

html 复制代码
<script setup lang="ts">
import { onUpdated } from 'vue'
import { useTemplateRefsList } from '@vueuse/core'

const refs = useTemplateRefsList<HTMLDivElement>()

onUpdated(() => {
  console.log(refs)
})
</script>

<template>
  <div v-for="i of 5" :key="i" :ref="refs.set" />
</template>

Demo2

html 复制代码
<script setup lang="ts">
import { useTemplateRefsList } from '@vueuse/core'
import { nextTick, ref, watch } from 'vue'

const count = ref(5)
const refs = useTemplateRefsList<HTMLDivElement>()

watch(refs, async () => {
  await nextTick()
  console.log([...refs.value])
}, {
  deep: true,
  flush: 'post',
})
</script>

<template>
  <span v-for="i of count" :key="i" :ref="refs.set" class="mr-2">
    {{ i }}
  </span>
  <br>
  <button @click="count += 1">
    Inc
  </button>
  <button :disabled="count <= 0" @click="count -= 1">
    Dec
  </button>
  <note>Open the console to see the output</note>
</template>
相关推荐
梦雨生生12 分钟前
拖拉拽效果加点击事件
前端·javascript·css
前端Hardy14 分钟前
HTML&CSS:全网最全的代码时钟效果
javascript·css·html
前端Hardy19 分钟前
HTML&CSS:看这里,动态背景卡片效果
javascript·css·html
前端Hardy19 分钟前
第2课:变量与数据类型——JS的“记忆盒子”
前端·javascript
前端Hardy21 分钟前
第1课:初识JavaScript——让你的网页“动”起来!
javascript
冴羽35 分钟前
SvelteKit 最新中文文档教程(23)—— CLI 使用指南
前端·javascript·svelte
jstart千语1 小时前
【SpringBoot】HttpServletRequest获取使用及失效问题(包含@Async异步执行方案)
java·前端·spring boot·后端·spring
徐小夕1 小时前
花了2个月时间,写了一款3D可视化编辑器3D-Tony
前端·javascript·react.js
凕雨1 小时前
Cesium学习笔记——dem/tif地形的分块与加载
前端·javascript·笔记·学习·arcgis·vue
程序猿小玉兒1 小时前
若依框架免登陆、页面全屏显示、打开新标签页(看板大屏)
前端