脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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顶部菜单栏实现小结

    vue顶部菜单栏实现小结

    这篇文章主要介绍了vue顶部菜单栏实现小结,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-06-06
  • 前端开发指南之vue-grid-layout的使用实例

    前端开发指南之vue-grid-layout的使用实例

    vue-grid-layout是一个vue栅格拖动布局的组件,下面这篇文章主要给大家介绍了关于前端开发指南之vue-grid-layout使用的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-09-09
  • vue父组件向子组件动态传值的两种方法

    vue父组件向子组件动态传值的两种方法

    这篇文章主要介绍了vue父组件向子组件动态传值的两种方法 ,需要的朋友可以参考下
    2017-11-11
  • vue如何在项目中调用腾讯云的滑动验证码

    vue如何在项目中调用腾讯云的滑动验证码

    这篇文章主要介绍了vue如何在项目中调用腾讯云的滑动验证码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07
  • vue页面之间相互传值的实现方式

    vue页面之间相互传值的实现方式

    这篇文章主要介绍了vue页面之间相互传值的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2026-03-03
  • vue本地打开build后生成的dist文件夹index.html问题

    vue本地打开build后生成的dist文件夹index.html问题

    这篇文章主要介绍了vue本地打开build后生成的dist文件夹index.html问题，本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧
    2019-09-09
  • Vue打包后不同版本详细解析

    Vue打包后不同版本详细解析

    vue项目打包是我们日常经常遇到的,下面这篇文章主要给大家介绍了关于Vue打包后不同版本详细解析的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2022-12-12
  • vue3.0安装Element ui及矢量图使用方式

    vue3.0安装Element ui及矢量图使用方式

    这篇文章主要介绍了vue3.0安装Element ui及矢量图使用,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2021-12-12
  • Vue项目打包dist目录详解

    Vue项目打包dist目录详解

    文章解释了Vue项目打包后dist目录下各文件夹及其文件的功能和作用,主要包括CSS文件、字体文件、图片文件、JS文件等,还说明了Sourcemap的作用及externals配置的使用方法
    2026-04-04
  • laravel5.4+vue+element简单搭建的示例代码

    laravel5.4+vue+element简单搭建的示例代码

    本篇文章主要介绍了laravel5.4+vue+element简单搭建的示例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-08-08

最新评论