中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

vue?3.0怎么使用ref獲取dom元素

發布時間:2022-08-26 10:16:58 來源:億速云 閱讀:592 作者:iii 欄目:開發技術

這篇文章主要講解了“vue 3.0怎么使用ref獲取dom元素”,文中的講解內容簡單清晰,易于學習與理解,下面請大家跟著小編的思路慢慢深入,一起來研究和學習“vue 3.0怎么使用ref獲取dom元素”吧!

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()可以顯示一個對象所有的屬性和方法

效果圖:

vue?3.0怎么使用ref獲取dom元素

感謝各位的閱讀,以上就是“vue 3.0怎么使用ref獲取dom元素”的內容了,經過本文的學習后,相信大家對vue 3.0怎么使用ref獲取dom元素這一問題有了更深刻的體會,具體使用情況還需要大家實踐驗證。這里是億速云,小編將為大家推送更多相關知識點的文章,歡迎關注!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

大冶市| 兴文县| 广宁县| 柯坪县| 上虞市| 天镇县| 保德县| 迭部县| 进贤县| 海兴县| 潮安县| 密山市| 沐川县| 本溪市| 巫溪县| 双江| 德安县| 九寨沟县| 莫力| 尚志市| 金乡县| 平顺县| 广平县| 瓦房店市| 邵武市| 嘉定区| 广德县| 南城县| 临清市| 突泉县| 南和县| 玉树县| 施甸县| 景洪市| 山东省| 怀安县| 奇台县| 万盛区| 达拉特旗| 江津市| 疏附县|