脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue3获取和操作DOM

Vue3获取和操作DOM元素的项目实践

 更新时间：2023年08月10日 10:17:21   作者：键指江湖  
在Vue3中,有时我们需要直接操作DOM节点，本文主要介绍了Vue3获取和操作DOM元素的项目实践,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

环境：vue3+ts+vite

目标：

1.修改DOM的文本值和样式

2.获取后代子DOM元素,操作修改

<template>
    <div class="content">
        <h1>演示</h1>
        <p ref="pText1">这是ref为pText1的一段文本</p>
    </div>
</template>
<script lang="ts" setup>
import {ref} from 'vue'
const pText1=ref()
console.log(pText1.value)
</script>

发现此时定义的 pText1 打印的值是undefined，这个情况发生原因是未真正获取到DOM元素，并不是我们定义的 const pText1=ref() 里面是空的问题。于是在生命钩子里面执行看看是什么？

<template>
    <div class="content" style="padding: 0 30px;">
        <h1>演示</h1>
        <p ref="pText1">这是ref为pText1的一段文本</p>
    </div>
</template>
<script lang="ts" setup>
import {onMounted, ref} from 'vue'
const pText1=ref()
console.log(pText1.value)
onMounted(()=>{
    console.log(pText1.value)
})
</script>

看到了吧。那接下来就知道怎么操作了,加一下颜色

onMounted(()=>{
    console.log(pText1.value)
    pText1.value.style.color='red'
})

再改个文本值看看

onMounted(()=>{
    console.log(pText1.value)
    pText1.value.style.color='red'
    pText1.value.innerText='我是修改后的文本值'
})

当然，我们不一定要页面加载就执行，我们可以定义一个方法来执行DOM修改操作：

<template>
    <div class="content" style="padding: 0 30px;">
        <h1>演示</h1>
        <p ref="pText1">这是ref为pText1的一段文本</p>
        <el-button @click="changeText" type="primary">点我修改</el-button>
    </div>
</template>
<script lang="ts" setup>
import {onMounted, ref} from 'vue'
const pText1=ref()
const changeText=()=>{
    console.log(pText1.value)
    pText1.value.style.color='red'
    pText1.value.innerText='我是点击后修改的文本值'
}
/*onMounted(()=>{
    console.log(pText1.value)
    pText1.value.style.color='red'
    pText1.value.innerText='我是修改后的文本值'
})*/
</script>

点击按钮前：

点击按钮后：

获取后代子DOM元素,操作修改

<template>
    <div class="content" style="padding: 0 30px;">
        <h1>演示</h1>
        <p ref="pText1">这是ref为pText1的一段文本 <span>aaaaaaa</span></p>
    </div>
</template>
<script lang="ts" setup>
import {onMounted, ref} from 'vue'
const pText1=ref()
onMounted(()=>{
    //console.log(pText1)
    console.log(pText1.value.children[0].innerHTML)
    pText1.value.children[0].style.color='red';
    pText1.value.children[0].innerText='我是修改后的span的文本';
})
</script>

总之，想要获取DOM元素属性，可以先打印出来，按需取值即可：

<template>
    <div class="content" style="padding: 0 30px;">
        <h1>演示</h1>
        <p ref="pText1">这是ref为pText1的一段文本 <span>aaaaaaa</span></p>
    </div>
</template>
<script lang="ts" setup>
import {onMounted, ref} from 'vue'
const pText1=ref()
onMounted(()=>{
    console.log(pText1)
})
</script>

到此这篇关于Vue3获取和操作DOM元素的项目实践的文章就介绍到这了,更多相关Vue3获取和操作DOM内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • 详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css

    详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css

    这篇文章主要介绍了详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-11-11
  • ​​​​​​​基于el-table和el-pagination实现数据的分页效果

    ​​​​​​​基于el-table和el-pagination实现数据的分页效果

    本文主要介绍了​​​​​​​基于el-table和el-pagination实现数据的分页效果，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08
  • VUE3中Element table表头动态展示合计信息

    VUE3中Element table表头动态展示合计信息

    本文主要介绍了在Vue中实现动态合计两个字段并输出摘要信息的方法,通过使用监听器和深度监听,确保当数据变化时能正确更新合计结果,具有一定的参考价值,感兴趣的可以了解一下
    2024-11-11
  • Vue 自定义指令详解

    Vue 自定义指令详解

    本文介绍了如何在Vue中定义和使用自定义指令,包括指令的注册、钩子函数、参数以及常见指令的封装,如v-copy、v-longpress等,自定义指令在处理某些底层DOM操作时非常便捷,感兴趣的朋友一起看看吧
    2025-01-01
  • Vue之ElementUI Form表单校验

    Vue之ElementUI Form表单校验

    这篇文章主要为大家详细介绍了Vue之ElementUI Form表单校验，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-08-08
  • vue父子组件动态传值的几种方式及注意问题详解

    vue父子组件动态传值的几种方式及注意问题详解

    这篇文章主要介绍了vue父子组件动态传值的几种方式及注意问题详解,需要的朋友可以参考下
    2022-12-12
  • vue3使用拖拽组件draggable.next的保姆级教程

    vue3使用拖拽组件draggable.next的保姆级教程

    做项目的时候遇到了一个需求,拖拽按钮到指定位置，添加一个输入框,这篇文章主要给大家介绍了关于vue3使用拖拽组件draggable.next的保姆级教程,需要的朋友可以参考下
    2023-06-06
  • vue2结合element-ui的gantt图实现可拖拽甘特图

    vue2结合element-ui的gantt图实现可拖拽甘特图

    因为工作中要用到甘特图,所以我在网上搜索可以用的甘特图,搜索了好多,但是网上搜到大多数都很鸡肋,不能直接使用,下面这篇文章主要给大家介绍了关于vue2结合element-ui的gantt图实现可拖拽甘特图的相关资料,需要的朋友可以参考下
    2022-11-11
  • Element Plus的el-icon怎么用

    Element Plus的el-icon怎么用

    在Element Plus里，Icon图标的用法和以前不一样了，本文主要介绍了Element Plus的el-icon怎么用，具有一定的参考价值，感兴趣的可以了解一下
    2022-04-04
  • Vue+Element-UI实现上传图片并压缩

    Vue+Element-UI实现上传图片并压缩

    这篇文章主要为大家详细介绍了Vue+Element-UI实现上传图片并压缩功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-11-11

最新评论