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. mac 安装homebrew 报443

    描述 macOS安装Homebrew时总是报错(Failed to connect to raw.githubusercontent.com port 443: Connection refused) ...

  2. Java int/int 保留2位小数

    @Test public void txfloat() { // TODO 自动生成的方法存根 int a=9; int b=7; DecimalFormat df=new DecimalFormat ...

  3. Spring5.X的注解配置项目

    pom.xml <?xml version="1.0" encoding="UTF-8"?> <project xmlns="htt ...

  4. dubbo面试题及答案

    Dubbo是什么? Dubbo是阿里巴巴开源的基于 Java 的高性能 RPC 分布式服务框架,现已成为 Apache 基金会孵化项目. 面试官问你如果这个都不清楚,那下面的就没必要问了. 官网:ht ...

  5. SpringBoot彩蛋之定制启动画面

    写在前面 在日常开发中,我们经常会看到各种各样的启动画面.例如以下几种 ① spring项目启动画面 ② mybatisplus启动画面 ③若依项目启动画面 还有很多各式各样好看的启动画面,那么怎么定 ...

  6. redis基本数据结构-散列

    redis基本数据结构-hash散列数据结构  1. 基本情况 一个散列键最多可以包含 2^32 - 1 个字段 散列类型不能嵌套其他数据类型 2.命令 插入/更新字段 hset key field1 ...

  7. iOS开发基础102-后台保活方案

    iOS系统在后台执行程序时,有严格的限制,为了更好地管理资源和电池寿命,iOS会限制应用程序在后台的运行时间.然而,iOS提供了一些特定的策略和技术,使得应用程序可以在特定场景下保持后台运行(即&qu ...

  8. Django __init__ 方法用于初始化

    使用面向对象的方法来创建一个栈板信息的模型,比如使用 Python 的类来表示栈板信息.以下是一个简单的示例: class Pallet: def __init__(self, number, nam ...

  9. 靶机: Chronos

    靶机: Chronos 准备 靶机:https://www.vulnhub.com/entry/chronos-1,735/ 使用 VirtualBox 网络 Host-Only 配置网络环境:htt ...

  10. FFmpeg开发笔记(四十)Nginx集成rtmp模块实现RTMP推拉流

    <FFmpeg开发实战:从零基础到短视频上线>一书的"10.2.2  FFmpeg向网络推流"介绍了轻量级流媒体服务器MediaMTX,虽然MediaMTX使用很简单, ...