动态创建组件与v-once用法,看看

最新推荐文章于 2023-07-11 15:15:26 发布

weixin_44346827

最新推荐文章于 2023-07-11 15:15:26 发布

阅读量91

点赞数

分类专栏： Vue基础2

本文链接：https://blog.csdn.net/weixin_44346827/article/details/90274629

版权

Vue基础2 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<title>动态创建组件与v-once用法</title>
	<meta charset="utf-8">
</head>
<body>
<div id="app">
	<component :is="type"></component>
	<!-- <child-one v-if="type==='child-one'"></child-one>
	<child-two v-if="type==='child-two'"></child-two> -->
	<button @click="handClick">点击</button>
</div>
</body>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
	//内置一个动态组件；<component>//通过绑定一个数据，is根据数据的加载，更换子组件；
	//<component :is="type"></component>
	//v-once提高静态展示效率；储存在缓存里面
	Vue.component("child-one",{
		template:"<div v-once >child-one</div>"
	})
	Vue.component("child-two",{
		template:"<div v-once>child-two</div>"
	})
	var app=new Vue({
		el:"#app",
		data:{
			type:"child-one"
		},
		methods:{
			handClick:function(){
				this.type=this.type=="child-one"?"child-two":"child-one";
			}
		}
	})
</script>
</html>

weixin_44346827

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
动态创建组件与v-once用法,看看

<!DOCTYPE html><html><head> <title>动态创建组件与v-once用法</title> <meta charset="utf-8"></head><body><div id="app"> <component :is="type">&...
复制链接

扫一扫