vue内置组件component--通过is属性动态渲染组件

最新推荐文章于 2024-05-29 14:42:10 发布

终是后来居上

最新推荐文章于 2024-05-29 14:42:10 发布

阅读量1.6k

点赞数 1

原文链接：https://blog.csdn.net/weixin_44023519/article/details/107583667

版权

vue 专栏收录该内容

114 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue"></script>
		<script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.js"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	</head>
	<body>
		<div id="app">
			<input @click="currentrouter='Home'" type="button" value="首页"/>
			<input @click="currentrouter='Fenlei'" type="button" value="分类"/>
			<input @click="currentrouter='My'" type="button" value="我的"/>
			<!-- 动态组件 component -->
			<component :is="currentrouter"></component>
		</div>
		
		<template id="home">
			<div>
				{{msg}}
			</div>
		</template>
		<template id="fenlei">
			<div>
				{{msg}}
			</div>
		</template>
		<template id="my">
			<div>
				{{msg}}
			</div>
		</template>
		
		<script>
			//局部定义三个组件
			const Home = {
				template:"#home",
				data(){
					return{
						msg:"这里是home组件"
					}
				}
			}
			const Fenlei = {
				template:"#fenlei",
				data(){
					return{
						msg:"这里是fenlei组件"
					}
				}
			}
			const My = {
				template:"#my",
				data(){
					return{
						msg:"这里是my组件"
					}
				},
			}
			//vue 实例
			var vm = new Vue({
				el:"#app",
				components:{
					Home,
					Fenlei,
					My
				},
				data:{
					msg:"hello world",
					currentrouter:"Home"
				},
				methods:{
					
				}
			})
			
		</script>
	</body>
</html>

终是后来居上

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue内置组件component--通过is属性动态渲染组件

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.js"&g
复制链接

扫一扫