我的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生命周期里去做