<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<button @click="addLi">新增li</button>
<ul id="oul">
<li v-for="item in arr" :key="item">
{{item}}
</li>
</ul>
</div>
<!-- 新增元素时 视图并不立即刷新 需要使用this.$nextTick(()=>{
改变新增元素的样式
}) -->
<!-- 如果不使用 则最后一个元素的样式改变 -->
<script src="./vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
arr: [1,2,3,4]
},
methods: {
addLi(){
const oul = document.querySelector('#oul');
this.arr.push(this.arr.length+1);
//视图更新的过程设计为异步的
this.$nextTick(()=>{
/*
this.$nextTick(callback)观察视图更新过程,每一次数据修改视图更新完成后触发
可以在新的回调函数中获取最新的dom
在每一次数据改变后,更新最新dom完毕后出发
*/
console.log(oul.children);
// 使用异步操作(定时器亦可实现)
// setTimeout(()=>{
oul.lastElementChild.style.background="red";
// },2000)
})
// oul.lastElementChild.style.background="red";
}
}
})
</script>
<!-- tips:
在进行浙里办项目开发时,在支付宝容器下 出现 接口发送请求 后端也返回数据 但是无法进入onSuccess方法
无法获取res数据
这时 使用了this.$nextTick方法才解决了这个问题
具体原因不解 敬请指教
-->
</body>
</html>