首页 前端知识 vue3获取dom

vue3获取dom

2024-08-12 10:08:00 前端知识 前端哥 26 314 我要收藏

在vue3中获取dom,有几点需要注意:

1,获取dom的ref元素名称,要对应暴露的名称,不然会出现无效的dom报错,也就是拿到的是null

2,在setup中,使用ref(null)获取dom

3,不能直接在setup里面拿到dom的值,因为setup对应的生命周期是created,所以必须在后续的生命周期钩子里面拿到,比如onMounted

4,代码如下,

<template>
  <div ref="main" style="width:300px;height:300px">123</div>
</template>

<script>
import * as echarts from 'echarts'
import { ref,onMounted,} from 'vue'
export default {
  setup(){
    const main = ref(null);
    console.log(main.value);//null
    onMounted(()=>{
      console.log(main.value);//div
      var myChart = echarts.init(main.value);
      var option;
      option = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar'
          }
        ]
      };
      myChart.setOption(option)
    });
    return{
      main
    }
  }
}
</script>


在这里插入图片描述

转载请注明出处或者链接地址:https://www.qianduange.cn//article/15404.html
标签
评论
发布的文章

HTML5 地理定位

2024-08-20 09:08:58

HTML5 的真相(一)

2024-08-20 09:08:31

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!