首页 > 其他分享 >模板引用 ref

模板引用 ref

时间:2023-02-28 14:22:05浏览次数:56  
标签:const 元素 onMounted 引用 ref 模板

虽然 Vue 的声明性渲染模型为你抽象了大部分对 DOM 的直接操作,但在某些情况下,我们仍然需要直接访问底层 DOM 元素。要实现这一点,我们可以使用特殊的 ref attribute:

访问模板引用#

为了通过组合式 API 获得该模板引用,我们需要声明一个同名的 ref:

<script setup>
import { ref, onMounted } from 'vue'

// 声明一个 ref 来存放该元素的引用
// 必须和模板里的 ref 同名
const input = ref(null)

onMounted(() => {
  input.value.focus()
})
</script>

<template>
  <input ref="input" />
</template>

v-for 中的模板引用

当在 v-for 中使用模板引用时,对应的 ref 中包含的值是一个数组,它将在元素被挂载后包含对应整个列表的所有元素:

<script setup>
import { ref, onMounted } from 'vue'

const list = ref([
  /* ... */
])

const itemRefs = ref([])

onMounted(() => console.log(itemRefs.value))
</script>

<template>
  <ul>
    <li v-for="item in list" ref="itemRefs">
      {{ item }}
    </li>
  </ul>
</template>

  

标签:const,元素,onMounted,引用,ref,模板
From: https://www.cnblogs.com/friend/p/17164111.html

相关文章

  • 元旦了,发布一个2009年的年历模板
     元旦了,发布一个2009年的年历模板。(下载地址在这里找到“2009年万年历模板”之后点击下载,下载之后的文件名为:ChineseCalendar4c_3r.png)你可以使用Photoshop或其他图像处理......
  • leetcode之——二分法模板
    classSolution:defsearch(self,nums:List[int],target:int)->int:n=len(nums)left,right=0,n-1whileleft<=right:k=(right-left)//2+left......
  • oracle的listener.ora和tnsnames.ora文件模板
    oracle经常要用到这2个文件。在这里提供下模板,方便参考。2个文件的位置在​​​$ORACLE_HOME​​​下的​​network/admin​​文件夹下。文章目录​​oracle11g版本​......
  • 软件测试与检验复习1(Introduction to Software Engineering/Software Testing/Test-Dr
     WhatisSoftwareEngineering?什么是软件工程Theprocessofsolvingcustomers'problemsbythesystematicdevelopmentandevolutionoflarge,high-quali......
  • 模板-选择最少的区间数目可以覆盖连续区间[0,n]
    方法:首先建立一个一维数组nums,nums[i]表是在当前位置上还能向右跑几步;然后更新最右距离://nums最优距离数组//t要跳的位置publicintjump(int[]nums......
  • DNSPY调试引用dll
    (1)点击“调试”,选择需要调试的可执行程序(2)点击“确定”后,打开程序,再点击“调试”-“窗口”-模块(3)右键模块,选择“从内存中打开模块”(4)发现,已经可以调试了......
  • P5788 【模板】单调栈
    P5788【模板】单调栈【模板】单调栈题目背景模板题,无背景。2019.12.12更新数据,放宽时限,现在不再卡常了。题目描述给出项数为n的整数数列a_{1...n}。定义函数......
  • C++模板
    写在前面现在我们来开启C++不同于C语言的地方.大家都知道C语言没有标准的数据结构相关的库,而C++存在STL,原因就是C++支持泛型编程,这是我们今天需要知道重点,先来简单的认......
  • 模板设计模式
    1、什么是模板设计模式把抽象类(AbstractClass)整体看作是一个模板,模板中不能决定的东西定义成抽象方法(AbstractMethod),让继承的子类去重写抽象方法实现需求。2、使用......
  • 随记一下之模板语法
    模板语法介绍:双层大括号{{}}是默认的模板界定符,用于在HTML模板文件中界定模板语法。模板语法都包含在{{和}}中间。{{.}}语句{{.}}中的点表示当前对象......