mounted钩子函数，调用操作dom时候，有时候会拿不到，使用this.$nextTick，也不一定好用

最新推荐文章于 2024-05-28 21:49:42 发布

前端小云儿

最新推荐文章于 2024-05-28 21:49:42 发布

阅读量458

点赞数

分类专栏： vue技能提升文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/jieweiwujie/article/details/134280799

版权

vue技能提升专栏收录该内容

71 篇文章 3 订阅 ¥29.90 ¥99.00

订阅专栏

超级会员免费看

在Vue.js应用中，当尝试在mounted钩子中直接操作DOM时，有时会遇到元素未渲染完成的情况，导致无法获取到正确的DOM节点。使用this.$nextTick虽然是一种延迟操作的方法，但并不总是有效。本文将探讨这个问题的原因及提供可靠的解决方案。

摘要由CSDN通过智能技术生成

<template>
  <div>
    <div class="style-div">
      <div
        v-for="(it, index) in objData"
        :key="index"
        :id="'id' + index"
        :class="index === acticeIndex ? 'actice-style' : ''"
        @click="click(index)"
      >
        {
  { it.name }}
      </div>
    </div>
    <div>
      <h3>{
  { objData[acticeIndex].name }}</h3>
    </div>
  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      objData: [
        {
          name: "产品展示1",
          age: "21",
        },
        {

了解本专栏