首页 > 资讯 > 前端开发 > 其他 >Vue3如何操作dom？四种方式介绍

711

分享到

Vue3如何操作dom？四种方式介绍

vue3 vue.js Vue 2022-11-22 23:11:14 711人浏览安东尼

摘要

最近产品经理提出了很多用户体验优化的需求，涉及到很多dom的操作。小张：“老铁，本来开发Vue2项目操作dom挺简单的，现在开发vue3项目，突然感觉一头雾水！”我：“没事，原理都差不多，查查资料应该没问题的！”至此将Vue3中dom操作常

最近产品经理提出了很多用户体验优化的需求，涉及到很多dom的操作。

小张：“老铁，本来开发 Vue2项目操作dom挺简单的，现在开发vue3项目，突然感觉一头雾水！”

我：“没事，原理都差不多，查查资料应该没问题的！”

至此将Vue3中dom操作常见的几种方式总结一下！（学习视频分享：vue视频教程）

通过ref直接拿到dom引用

<template>
    <div>
        <div ref="sectionRef"></div>
    </div>
</template>

<script setup>
import {ref} from 'vue'
const sectionRef = ref()
</script>

通过对div元素添加了ref属性，为了获取到这个元素，我们声明了一个与ref属性名称相同的变量sectionRef，然后我们通过 sectionRef.value 的形式即可获取该div元素。

适用场景

单一dom元素或者个数较少的场景

示例代码

<template>
    <div>
        <p>通过ref直接拿到dom</p>
        <div ref="sectionRef"></div>
        <button @click="higherAction">变高</button>
    </div>
</template>

<script setup>
import {ref} from 'vue'
const sectionRef = ref()
let height = 100;

const higherAction = () => {
    height += 50;
    sectionRef.value.style = `height: ${height}px`;
}
</script>

<style scoped>
.demo1-container {
    width: 100%;
    height: 100%;

    .ref-section {
        width: 200px;
        height: 100px;
        background-color: pink;
        transition: all .5s ease-in-out;
    }

    .btn {
        width: 200px;
        height: 50px;
        background-color: gray;
        color: #fff;
        margin-top: 100px;
    }
}
</style>

通过父容器的ref遍历拿到dom引用

<template>
    <div>
        <div ref="listRef">
            <div @click="higherAction(index)" v-for="(item, index) in state.list" :key="index">
                <span>{{item}}</span>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, Reactive } from 'vue'
const listRef = ref()

通过对父元素添加了ref属性，并声明了一个与ref属性名称相同的变量listRef，此时通过listRef.value会获得包含子元素的dom对象

此时可以通过listRef.value.children[index]的形式获取子元素dom

适用场景

通过v-for循环生成的固定数量元素的场景

示例代码

<template>
    <div>
        <p>通过父容器遍历拿到dom</p>
        <div ref="listRef">
            <div @click="higherAction(index)" v-for="(item, index) in state.list" :key="index">
                <span>{{item}}</span>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
const listRef = ref()
const state = reactive({
    list: [1, 2, 3, 4, 5, 6, 7, 8]
})

const higherAction = (index: number) => {
    let height = listRef.value.children[index].style.height ? listRef.value.children[index].style.height : '20px';
    height = Number(height.replace('px', ''));
    listRef.value.children[index].style = `height: ${height + 20}px`;
}
</script>

<style scoped>
.demo2-container {
    width: 100%;
    height: 100%;

    .list-section {
        width: 200px;
        .list-item {
            width: 200px;
            height: 20px;
            background-color: pink;
            color: #333;
            transition: all .5s ease-in-out;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
}
</style>

通过:ref将dom引用放到数组中

<template>
    <div>
        <div>
            <div :ref="setRefAction" @click="higherAction(index)" v-for="(item, index) in state.list" :key="index">
                <span>{{item}}</span>
            </div>
        </div>
    </div>
</template>

<script setup>
import { reactive } from 'vue'

const state = reactive({
    list: [1, 2, 3, 4, 5, 6, 7],
    refList: [] as Array<any>
})

const setRefAction = (el: any) => {
    state.refList.push(el);
}
</script>

通过:ref循环调用setRefAction方法，该方法会默认接收一个el参数，这个参数就是我们需要获取的div元素

此时可以通过state.refList[index]的形式获取子元素dom

适用场景

通过v-for循环生成的不固定数量或者多种元素的场景

示例代码

<template>
    <div>
        <p>通过:ref将dom引用放到数组中</p>
        <div>
            <div :ref="setRefAction" @click="higherAction(index)" v-for="(item, index) in state.list" :key="index">
                <span>{{item}}</span>
            </div>
        </div>
    </div>
</template>

<script setup>
import { reactive } from 'vue'

const state = reactive({
    list: [1, 2, 3, 4, 5, 6, 7],
    refList: [] as Array<any>
})

const higherAction = (index: number) => {
    let height = state.refList[index].style.height ? state.refList[index].style.height : '20px';
    height = Number(height.replace('px', ''));
    state.refList[index].style = `height: ${height + 20}px`;
    console.log(state.refList[index]);
}

const setRefAction = (el: any) => {
    state.refList.push(el);
}
</script>

<style scoped>
.demo2-container {
    width: 100%;
    height: 100%;

    .list-section {
        width: 200px;
        .list-item {
            width: 200px;
            height: 20px;
            background-color: pink;
            color: #333;
            transition: all .5s ease-in-out;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
}
</style>

通过子组件emit传递ref

<template>
    <div ref="cellRef" @click="cellAction">
        <span>{{item}}</span>
    </div>
</template>

<script setup>
import {ref} from 'vue';

const props = defineProps({
    item: Number
})
const emit = defineEmits(['cellTap']);
const cellRef = ref();
const cellAction = () => {
    emit('cellTap', cellRef.value);
}
</script>

通过对子组件添加了ref属性，并声明了一个与ref属性名称相同的变量cellRef，此时可以通过emit将cellRef.value作为一个dom引用传递出去

适用场景

多个页面都可能有操作组件dom的场景

示例代码

<template>
    <div ref="cellRef" @click="cellAction">
        <span>{{item}}</span>
    </div>
</template>

<script setup>
import {ref} from 'vue';

const props = defineProps({
    item: Number
})
const emit = defineEmits(['cellTap']);
const cellRef = ref();
const cellAction = () => {
    emit('cellTap', cellRef.value);
}
</script>

<style scoped>
.cell-item {
    width: 200px;
    height: 20px;
    background-color: pink;
    color: #333;
    transition: all .5s ease-in-out;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>

<template>
    <div>
        <p>通过子组件emit传递ref</p>
        <div>
            <Cell :item="item" @cellTap="cellTapHandler" v-for="(item, index) in state.list" :key="index">
            </Cell>
        </div>
    </div>
</template>

<script setup>
import { reactive } from 'vue'
import Cell from '@/components/Cell.vue'
const state = reactive({
    list: [1, 2, 3, 4, 5, 6, 7],
    refList: [] as Array<any>
})

const cellTapHandler = (el: any) => {
    let height = el.style.height ? el.style.height : '20px';
    height = Number(height.replace('px', ''));
    el.style = `height: ${height + 20}px`;
}
</script>

<style scoped>
.demo2-container {
    width: 100%;
    height: 100%;

    .list-section {
        width: 200px;
    }
}
</style>

【相关视频教程推荐：vuejs 入门教程、web前端入门】

以上就是Vue3如何操作dom？四种方式介绍的详细内容，更多请关注编程网其它相关文章！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: Vue3如何操作dom？四种方式介绍

本文链接: https://www.lsjlt.com/news/173409.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

Vue3如何操作dom？四种方式介绍

最近产品经理提出了很多用户体验优化的需求，涉及到很多dom的操作。小张：“老铁，本来开发Vue2项目操作dom挺简单的，现在开发vue3项目，突然感觉一头雾水！”我：“没事，原理都差不多，查查资料应该没问题的！”至此将Vue3中dom操作常...

99+

2022-11-22

vue3 vue.js Vue
Vue3中操作dom的四种方式保姆级教程(推荐!)

目录前言一、通过 ref 拿到 dom 的引用适用场景示例代码二、通过父容器的 ref 遍历拿到 dom 引用适用场景示例代码三、通过子组件 emit 传递 ref适用场景示例代码四...

99+

2023-05-17

vue3.0操作dom vue3 dom vue如何获取dom
Python中引用传参四种方式介绍

目录引用传参一：引用传参二：引用传参三：引用传参四：总结引用传参一： >>> a = 100 #这里的a是不可变类型 >>> d...

99+

2024-04-02
C#调用接口的四种方式介绍

在用C#调用接口的时候，遇到需要通过调用登录接口才能调用其他的接口，因为在其他的接口需要在登录的状态下保存Cookie值才能有权限调用，所以首先需要通过调用登录接口来保存cookie...

99+

2024-04-02
Vue中四种操作dom方法保姆级讲解

目录前言一、通过ref拿到dom的引用适用场景示例代码二、通过父容器的ref遍历拿到dom引用适用场景示例代码三、通过子组件emit传递ref适用场景示例代码四、通过:ref将dom...

99+

2023-02-01

Vue操作dom Vue操作dom方式 Vue操作dom方法
PHP四种统计在线人数方式详细介绍

目录1 用表统计方式2 使用 redis 有序集合实现在线人数统计3 使用 hyperloglog 做统计4 使用 bitmap 统计1 用表统计方式用数据表统计在线人数，这种方式...

99+

2024-04-02
jQuery样式操作方法整理介绍

目录1.操作css方法2.设置样式类方法2.1添加类2.2移除类2.3切换类3.tab栏切换案例实现效果案例分析核心代码html结构4.jQuery类操作与className区别1....

99+

2022-11-13

jQuery样式操作方法 jQuery样式操作函数 jQuery样式操作
win8系统下磁盘分区的几种操作方式介绍

在Win8系统下，磁盘分区可以通过以下几种方式进行操作：1. 使用磁盘管理工具：Win8系统自带了一个磁盘管理工具，可以通过控制面板...

99+

2023-08-30

win8
Vue3中操作ref的四种使用方式示例代码(建议收藏)

目录前言通过ref直接拿到dom引用适用场景示例代码通过父容器的ref遍历拿到dom引用适用场景示例代码通过:ref将dom引用放到数组中适用场景示例代码通过子组件emit传递ref...

99+

2023-05-16

Vue3操作ref Vue3 ref使用
vue3的介绍和两种创建方式详解(cli和vite)

目录一、vue3的介绍（一）vue3的简介（二）vue3对比vue2带来的性能提升二、vue3的两种创建方式方式一：使用vue-cli创建（推荐--全面）操作步骤&nbs...

99+

2023-05-16

vue3 cli和vite创建方式 vue3两种创建方式 vue3介绍
PHP常见的文件操作方式介绍

这篇文章主要讲解了“PHP常见的文件操作方式介绍”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“PHP常见的文件操作方式介绍”吧！1.打开文件resource fopen ...

99+

2023-06-17
Shell四种运行方式/启动方式如何实现

这篇文章主要介绍“Shell四种运行方式/启动方式如何实现”，在日常操作中，相信很多人在Shell四种运行方式/启动方式如何实现问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Shell四种运行方式/启动方式如...

99+

2023-06-09
git如何查看项目？多种方法介绍

随着软件开发的快速发展，版本控制已经成为必不可少的一项技能，Git 是目前最受欢迎的分布式版本控制系统之一。在使用 Git 进行版本控制时，应该如何查看项目呢？本文将为大家介绍 Git 的相关内容，让读者更方便地管理代码。一、Git 基本命...

99+

2023-10-22
windows7如何禁用u盘方式介绍

windows7如何禁用u盘呢，最先，打开运行进到Regedit的注册表页面中，用户能通过在这儿开展进一步设定，将usb的控制服务设定值调整后用户的U盘就可以被禁用了。这个方法非常的容易，下面就是windows7如何禁用u盘方式介绍的具体介...

99+

2023-07-10
windows10如何显示星期几方式介绍

windows10如何显示星期几呢，最先客户进到控制面板，找到日期和时间标志进入设置，然后就能够在吗开展点击变更日期和时间，接着就可以作用改日里的设置，在这儿短时间选项中可以修改，下面就是具体的windows10如何显示星期几方式介绍，在这...

99+

2023-07-13
安装MySQL后如何运行？介绍两种方法

上一篇文章小白如何安装MySQL——使用安装器安装有写到如何快速安装MySQL 那么这篇就来介绍一下安装后怎么启动MySQL 提供两种方法一、cmd程序启动首先要找到安装后的mysql目录下的bin文件，该文件下有个mysql的应用程序...

99+

2023-10-25

mysql 数据库
windows10如何关闭防火墙方式介绍

windows10怎样关闭防火墙在客户们的心目中一直是一个问题，许多客户有些时候应用一些软件的时候是被防火墙严禁的，因此只能够根据关闭防火墙来处理此问题，客户们应用Win10的情况下根据关闭防火墙可能影响安全，可是想要知道怎么关闭的话，就参...

99+

2023-07-14
win10组策略如何打开方式介绍

win10组策略如何打开呢，有些用户使用win10的时候遇到了需要用到组策略的步骤，可是却发现自己不知道如何打开组策略，那么要如何才能够打开组策略成了一个难题，因而这里就对于用户们的这个问题增添了win10组策略如何打开方式介绍，根据下面的...

99+

2023-07-10
如何用php将时间格式转为时间戳？两种方法介绍

PHP是一种广泛使用的服务器端编程语言，用于开发Web应用程序。在Web应用程序中，经常需要将时间以不同的格式进行展示或计算，而PHP中提供了强大的时间处理函数，使得时间处理变得非常容易。在本文中，我们将介绍如何将PHP时间格式转换为时间戳...

99+

2023-05-14

php时间戳 php
如何设置Git邮箱地址？两种方法介绍

在使用 Git 进行代码托管和版本控制的过程中，如果你想在提交代码时被正确的识别和归属，那么需要设置正确的 Git 邮箱地址。如果不设置邮箱，那么提交代码的作者将会是默认的 Git 用户，这可能会导致代码历史不可读性，并且无法更好地识别谁提...

99+

2023-10-22