1. 通过 ref
    1. 在 html 标签上指定 ref 属性
    2. 在 setup 中定义并返回.注意:标签上的 ref 属性名需要跟 setup 中的对应
        <h1 ref="msg">Welcome to vue3 app</h1>
setup() {
const msg = ref(null);
onMounted(() => {
console.log(msg.value.innerHTML);
});
return {
msg,
};
},
2. 通过原生 JavaScript 获取
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">
vue-cli documentation
</a>;
onMounted(() => {
console.log(document.querySelector('a[rel="noopener"]').href);
});

vue3 如何获取 dom的更多相关文章

  1. vue3+ts获取dom元素高度

    vue3+ts获取dom元素高度 <template> <div class="digestDetail-indedx"> <div class=&q ...

  2. 通过class和id获取DOM元素的区别

    1.通过id获取DOM元素的方法:document.getElementById("id名") 2.通过class获取DOM元素的方法:document.getElementsBy ...

  3. JS1 js获取dom元素方法

     js获取dom元素方法  1.通过ID选取元素(getElementById) 1)使用方法:document.getElementById("domId")         其 ...

  4. React 点击删除列表中对应项(React 获取DOM中自定义属性)

    点击删除按钮,删除列表中对应项本来是React比较基础的应用,可是应用情况变得复杂了以后,我还真想了一会儿才搞定. 简化一下应用场景:点击新增按钮,增加一条输入框,点击输入框旁边的按钮,删除该输入框( ...

  5. 用document.onreadystatechange和document.readyState确保文档加载完毕才获取DOM

    document.onreadystatechange = function(){ //document.readyState有“interactive”和“complate”两个值 if(docum ...

  6. 获取DOM元素位置和尺寸大小

    JavaScript获取DOM元素位置和尺寸大小 在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果,这种时候我们经常会用到一些元素位置和尺寸的计算,浏览器兼容性问题也是不可忽 ...

  7. vue获取dom元素内容

    通过ref来获取dom元素 在vue官网上对ref的解释 ref 被用来给元素或子组件注册引用信息.引用信息将会注册在父组件的 $refs 对象上.如果在普通的 DOM 元素上使用,引用指向的就是 D ...

  8. Vue自定义指令获取DOM元素

    我们知道,Vue.js的核心是数据驱动,当数据有所变化时,DOM就会被更新,比如: <span v-text="msg"></span> export de ...

  9. javascript中获取dom元素的高度和宽度

    javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...

  10. vue(4)—— vue的过滤器,监听属性,生命周期函数,获取DOM元素

    过滤器 vue允许自定义过滤器,我个人认为,过滤器有两种,一种是对数据的清洗过滤,一种是对数据切换的动画过滤 数据切换的动画过滤 这里还是利用前面的动态组件的例子: 这里由于没办法展示动画效果,代码如 ...

随机推荐

  1. SpringBoot 启动时报错Unable to start embedded Tomcat

    导读 最近公司有个gradle构建的工程,需要改造成maven方式构建(点我直达).转为maven后,启动时一直报tomcat错误,最终排查是因为servlet-api这个包导致的依赖冲突,将这个依赖 ...

  2. SpringBoot Maven查看依赖树

    dependency:tree -f pom.xml

  3. 一套基于 Ant Design 和 Blazor 的开源企业级组件库

    前言 今天大姚给大家分享一套基于Ant Design和Blazor的开源(MIT License).免费的企业级组件库(喜欢Ant Design风格的同学推荐使用):Ant Design Blazor ...

  4. springboot简单正确的使用构造函数注入

    一个一个写构造函数太麻烦了,而且代码会显得非常多,这里我们可以采用lombok快捷注入 但是我们并不是所有的成员变量都需要进行注入,所以使用 @RequiredArgsConstrucotr 需要构造 ...

  5. nats 简介和使用

    nats 简介和使用 nats 有 3 个产品 core-nats: 不做持久化的及时信息传输系统 nats-streaming: 基于 nats 的持久化消息队列(已弃用) nats-jetstre ...

  6. [rCore学习笔记 020]第二章作业

    写在前面 本随笔是非常菜的菜鸡写的.如有问题请及时提出. 可以联系:1160712160@qq.com GitHhub:https://github.com/WindDevil (目前啥也没有 编程题 ...

  7. 【Vue】Re15 Router 第二部分(缺省路由、动态路由)

    一.设置首页重定向: import Vue from 'vue'; import Router from 'vue-router'; import Home from "../compone ...

  8. 【Vue】Re01 理论概念和入门上手

    一.Vue概述 什么是渐进式?1.把Vue作应用的一部分嵌套项目中2.如果完全抛弃其他组件和框架,Vue又具有丰富的生态和库莱支持3.Core + Router + VueX 满足项目绝大多数的需求- ...

  9. 【转载】 t-SNE是什么? —— 使用指南

    原文地址: https://www.cnblogs.com/LuckBelongsToStrugglingMan/p/14161405.html 转者前言: 该文相当于一个  t-SNE  使用指南, ...

  10. Linux系统内核的作用

      Linux系统内核在操作系统中扮演着至关重要的角色,其作用主要体现在以下几个方面: 进程管理:内核负责创建和销毁进程,这是操作系统对计算机上正在运行的程序进行管理的核心部分.内核通过调度器对进程进 ...