静默刷新的适用场景

最新推荐文章于 2023-04-12 15:07:03 发布

myazwj

最新推荐文章于 2023-04-12 15:07:03 发布

阅读量199

点赞数 1

文章标签： vscode ide visual studio code

本文链接：https://blog.csdn.net/myazwj/article/details/121565985

版权

适用的场景：

适用场景:数据修改,页面未刷新组件内容的还原，还原以前的数据

静默刷新
适用场景：数据修改了，页面没更新
组件的还原
需要刷新的数据 v-if="bol" bol默认为true
this.bol=false
this.$nextTick(()=>{
this.bol=true
})

<!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" v-if="bol">
		<h3>{{obj}}</h3>
		<button @click="btnClick">修改obj</button>
	</div>
	<script src="./vue.js"></script>
	<script>
		new Vue({
			el: '#app',
			data: {
				bol: true,
				obj: {
					x: 1
				}
			},
			methods: {
				btnClick() {
					this.obj.x = Date.now()
					this.bol = false
					this.$nextTick(() => {
						this.bol = true
					})
				}
			}
		})
	</script>
</body>

</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

myazwj

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
静默刷新的适用场景

适用的场景：适用场景:数据修改,页面未刷新组件内容的还原，还原以前的数据静默刷新适用场景：数据修改了，页面没更新组件的还原需要刷新的数据 v-if="bol" bol默认为truethis.bol=falsethis.$nextTick(()=>{ this.bol=true})<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /...
复制链接

扫一扫