vue.js - vuejs 渲染完html后优惠掉方法么？

问题描述

问 题

我的html是用根据数据库的数据用vue驱动生成的，
但是渲染后的完整的html中的dom我需要用js去做操作，
问题是我现在的js操作的dom节点可能vue都没渲染出来，
vue有没有一个渲染完毕的回调函数呢， 或者这个要怎么解决！！！！

html:

<div id="pageing" style="display: flex; justify-content: space-between;" class="pagebutton">
            <div class="Lev"><</div>
            <div class="On" v-for="item in items" v-if="($index<1)">{{item}}</div>
            <div class="Lev" v-for="item in items" v-if="($index>0)">{{item}}</div>
            <div class="Lev">></div>
</div>

js:

<script type="text/javascript">
            //这是vue根据数据在渲染html
            $.ajax({
                type: 'get',
                url: '/api/companynew/getAlldataNum',
                dataType: 'json',
                success: function (data) {
                    data = 20;
                    $("#pageienses").val(data % 4 == 0 ? data / 4 : ~~(data / 4) + 1);
                    var pagedata = [];
                    for (var i = 1; i <= $("#pageienses").val() ; i++) {
                        pagedata.push(i);
                    }
                    new Vue({
                        el: '#pageing',
                        data: { items: pagedata }
                    })
                },
                error: function () {
                }
            });
            //网上说是用这个回调
            Vue.nextTick(function () {
                alert();//这里写一个alert程序就正常了，好奇怪
            })
            //这里我加了ready,remdy里面的就是我想vue完全渲染完成后在执行的代码
            $(document).ready(function () {
                //让翻页按钮个数来决定容器宽度
                var $pagecontainer = $(".pagebutton");
                var pagelen = $pagecontainer.children().length;//~~$("#pageienses").val()+2//
                alert(pagelen);
                $pagecontainer.css("padding", "2em " + ($pagecontainer.outerWidth(true) - pagelen * 50) / 2 + "px");
                //鼠标悬浮效果
                var pageonIndex = $(".pagebutton .On").index();
                $pagecontainer.children().hover(
                function () {
                    for (var i = 0; i < pagelen; i++) {
                        if ($(this).index() == i) {
                            $(this)[0].className = "On";
                        }
                    }
                }, function () {
                    for (var i = 0; i < pagelen; i++) {
                        if ($(this).index() != i && $(this).index() != pageonIndex) {
                            $(this)[0].className = "Lev";
                        }
                    }
                }
                );
                //切换到选中页码
                $pagecontainer.children().click(function () {
                    $pagecontainer.children()[pageonIndex].className = "Lev";
                    pageonIndex = $(this).index();
                })
            })
        </script>

解决方案

在ready生命周期里去做

这篇关于vue.js - vuejs 渲染完html后优惠掉方法么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！