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. Oracle 触发器 before insert update

    场景,往A表插入数据时,A表和B表是同一类型的状态下,A表中累计的值,不能超过B表中的值(注:往数据库插入时,不能批量执行事务!),利用触发器before insert update,监控状态,若超过 ...

  2. 痞子衡嵌入式:瑞萨RA8系列高性能MCU开发初体验

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是瑞萨RA8系列高性能MCU开发上手体验. 我们知道瑞萨半导体的通用 MCU 产品线主要包含基于自有内核 8/16bit RL78 系列以 ...

  3. 图的存储、创建、遍历、求最小生成树、最短路径(Java)

    带权无向图 存储结构 存储结构选用邻接表. 当一个图为稀疏图时,使用邻接矩阵法显然要浪费大量的存储空间,而图的邻接表法结合了顺序存储和链式存储方法,大大减少了这种不必要的浪费. 当然,即使我们所处理的 ...

  4. 毕业设计&毕业项目:基于springboot+vue实现的在线音乐平台

    一.前言 在当今数字化时代,音乐已经成为人们生活中不可或缺的一部分.随着技术的飞速发展,构建一个用户友好.功能丰富的在线音乐平台成为了许多开发者和创业者的目标.本文将介绍如何使用SpringBoot作 ...

  5. vscode 常用设置

    vscode 常用设置   by:授客 QQ:1033553122   版本 vscode Version: 1.33.1   1.   自动保存文件设置 文件编辑一秒钟过后自动保存 2.   黏贴后 ...

  6. 【VMware VCF】VMware Cloud Foundation Part 05:部署 SDDC 管理域。

    之前文章("VMware Cloud Foundation Part 03:准备 Excel 参数表."和"VMware Cloud Foundation Part 04 ...

  7. Windows下搭建Vue脚手架CLI

    Vue CLI的使用依赖Node.js,先按照Node.js环境. //安装环境C:\Users\16779>npm install --global vue-cli npm WARN depr ...

  8. 【Scala】05 对象特性Part2

    特质重复继承关系 父类特质 A 子类特质B 继承 A 子类特质C 继承A 类D 继承了 B 又实现了 C class D extends B with C 继承顺序是 D 继承 C 继承 B 继承 A ...

  9. 【OracleDB】 04 DDL

    Create 创建表 创建数据表,语法和MySQL基本一样 演示案例练习: 打开PLSQL,新建一个SQL脚本窗口 编写SQL语句 -- 创建学生信息表 CREATE TABLE tb_student ...

  10. 如何将python的pip源设置为阿里云

    为python的pip源设置为阿里云,pip源的设置操作: pip config set global.index-url https://mirrors.cloud.aliyuncs.com/pyp ...