vue ref获取dom元素
好巧. 人气:0前言
附上vue3.0文档:Vue3中文文档 - vuejs
Vue 2.x获取DOM
<div ref="myRef"></div> this.$refs.myRef
Vue 3.0获取单个DOM
<template> <div ref="myRef">获取单个DOM元素</div> </template> <script> import { ref, onMounted } from 'vue'; export default { setup() { const myRef = ref(null); onMounted(() => { console.dir(myRef.value); }); return { myRef }; } }; </script>
Vue 3.0获取多个DOM(一般用于获取数组)
<template> <div>获取多个DOM元素</div> <ul> <li v-for="(item, index) in arr" :key="index" :ref="setRef"> {{ item }} </li> </ul> </template> <script> import { ref, nextTick } from 'vue'; export default { setup() { const arr = ref([1, 2, 3]); // 存储dom数组 const myRef = ref([]); const setRef = (el) => { myRef.value.push(el); }; nextTick(() => { console.dir(myRef.value); }); return { arr, setRef }; } }; </script>
注:console.dir()可以显示一个对象所有的属性和方法
效果图:
如果本篇文章对你有帮助的话,很高兴能够帮助上你。
当然,如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方,希望你在看到之后能够在评论里指出来,我会在看到之后尽快的回复你。
加载全部内容