静默刷新的适用场景

最新推荐文章于 2024-05-18 17:11:58 发布

原创最新推荐文章于 2024-05-18 17:11:58 发布 · 260 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vscode #ide #visual studio code

适用的场景：

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

静默刷新
适用场景：数据修改了，页面没更新
组件的还原
需要刷新的数据 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>