组合API-ref属性
-
单个元素:先申明ref响应式数据,返回给模版使用,通过ref绑定数据
-
遍历的元素:先定义一个空数组,定一个函数获取元素,返回给模版使用,通过ref绑定这个函数
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <br><br><template> <div class = "container" > <!-- vue2.0 获取单个元素 --> <!-- 1. 通过ref属性绑定该元素 --> <!-- 2. 通过 this .$refs.box获取元素 --> <!-- <div ref= "box" >我是box</div> --> <!-- vue2.0 获取v- for 遍历的多个元素 --> <!-- 1. 通过ref属性绑定被遍历元素 --> <!-- 2. 通过 this .$refs.li 获取所有遍历元素 --> <!-- <ul> <li v- for = "i in 4" :key= "i" ref= "li" >{{i}}</li> </ul> --> <!-- 单个元素 --> <div ref= "dom" >我是box</div> <!-- 被遍历的元素 --> <ul> <li v- for = "i in 4" :key= "i" :ref= "setDom" >第{{i}}LI</li> </ul> </div> </template> <script> import { onMounted, ref } from 'vue' export default { name: 'App' , setup () { // 1. 获取单个元素 // 1.1 先定义一个空的响应式数据ref定义的 // 1.2 setup中返回该数据,你想获取那个dom元素,在该元素上使用ref属性绑定该数据即可。 const dom = ref( null ) onMounted(()=>{ console.log(dom.value) }) } } </script> <style scoped lang= "less" ></style> |
获取v-for遍历的DOM或者组件
// 2. 获取v-for遍历的元素 // 2.1 定义一个空数组,接收所有的LI // 2.2 定义一个函数,往空数组push DOM const domList = [] const setDom = (el) => { domList.push(el) } onMounted(()=>{ console.log(domList) }) return {dom, setDom}
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步