vue2中ref获取dom:

<div class="hello" ref="gantt">
   111111
</div>

 mounted() {
    console.log(this.$refs.gantt)
  }

在这里插入图片描述
vue3中setup函数中this指向undefined,所以需要引入 ref 。
vue3中ref获取单个dom:

<template>
  <div class="plusgantt" id='plusgantt' ref='plusgantt'>
    <div>1312</div>
  </div>
</template>

<script>
import {  onMounted, ref } from "vue";

export default {
  setup() {
    const plusgantt = ref(null); 
    onMounted(() => {
        console.log(plusgantt.value)
    });
    return {
      plusgantt,
    };
  }
};
</script>

在这里插入图片描述

vue3中也可以获取多个dom
vue3中ref获取多个dom:

<template>
    <div class="plusgantt" ref='plusgantt'>
        <ul>
            <li v-for="(item,index) in data" :key="index" ref='liList'>{{ item.name }}</li>
        </ul>
  </div>
</template>

<script>
import { reactive, toRefs, onMounted, ref } from "vue";

export default {
  setup() {
      const vueConfig = reactive({
        data: [
            {id: 1, name: 'list1' },
            {id: 2, name: 'list2'},
            {id: 3, name: 'list3'},
            {id: 4, name: 'list4'}
        ]
      })
      const liList = ref([]);// 存储dom列表
      onMounted(() => {
          console.log(liList.value)
      });
    return {
        ...toRefs(vueConfig),
        liList
    };
  }
};
</script>

在这里插入图片描述
也可以动态绑定一个方法,方法参数就是每一个li,可以push进liList 数组中。

<template>
    <div class="plusgantt" ref='plusgantt'>
        <ul>
            <li v-for="(item,index) in data" :key="index" :ref='mutiRef'>{{ item.name }}</li>
        </ul>
  </div>
</template>
<script>
import { reactive, toRefs, onMounted, ref } from "vue";

export default {
  setup() {
      const vueConfig = reactive({
        data: [
            {id: 1, name: 'list1' },
            {id: 2, name: 'list2'},
            {id: 3, name: 'list3'},
            {id: 4, name: 'list4'}
        ]
      })
      const liList = ref([]);  // 存储dom列表
      let mutiRef = (el)=> {
          liList.value.push(el)
      }
      onMounted(() => {
          console.log(liList.value)
      });
    return {
        ...toRefs(vueConfig),
        mutiRef
    };
  }
};
</script>

在这里插入图片描述

GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891 Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐