Vue.js踩坑日记 —— 关于在Mounted生命周期函数中操作DOM元素

前言

在最近开发Vue项目时想在mounted生命周期函数中操作DOM元素，但是在自我尝试下无果，次次操作进行参数结果为：undefined ，然后根据网上内容与自我尝试，特此写下该文章解惑于各位。

代码

补充：我的功能需求为在数据加载结束后，根据type字段进行相应的Class类名操作

DOM:

	        <!-- 优惠券内容区域 -->
        <div class="coupons_content col-xs-12">
            <div class="coupons_item col-xs-6" v-for="(item,index) of data" :key="item.id" ref="items">
                <div class="coupons_list col-xs-12 discount" ref="demo">
                    <h2 style="font-size: 15px;text-align: center;color: white;" v-text="item.name"></h2>
                    <p v-text="item.type"></p>
                </div>
                <div class="coupons_description">
                    <p>有效期始：<span class="startDate">{{item.startDate}}</span></p>
                    <p>有效期末：<span class="endDate">{{item.endDate}}</span></p>
                    <p>所需条件：<span class="flag"> {{item.description}}</span></p>
                </div>
                <div class="coupons_button col-xs-12 ">
                    <button class="btn btn-success col-xs-12" @click="exchangeShow(index)">立即兑换</button>
                </div>
            </div>

        </div>

贴核心功能方法Js：

	changeCouponsType: function(){
            for(let i = 0;i<this.data.length;i++){
                
                console.log("相关Type: " + this.data[i].type)
                if(this.data[i].type == "积分"){
                    this.$nextTick(function(){
                        $(".coupons_list").eq(i).removeClass("discount").addClass("integral");

                    })
                }else{
                    $(".coupons_list").eq(i).removeClass("integral").addClass("discount");
                }
            }
        },

温馨提示

代码中有用到this.$nextTick进行DOM元素处理。
效果：回调延迟DOM元素更新后循环并执行，当数据修改之后立即使用它，并等待DOM更新

效果介绍 引用来自：

拐锅：https://blog.csdn.net/a654540233/article/details/107245152/

结束语

今天我们讲解了一下Vue的在Mounted生命周期函数中操作DOM元素

• 如果对你有帮助的话可以给我点赞收藏，十分感谢
• 致力做优、好、细、精学习笔记分享给大家
• 可以转载 需标明 出处 本文链接。
• 笔者一个开源项目：餐饮管理系统 希望大家可以点一下star哦

感谢你的观看。