vue3中知识点4动态组件代码

最新推荐文章于 2024-05-28 16:22:58 发布

luanmabug

最新推荐文章于 2024-05-28 16:22:58 发布

阅读量309

点赞数

分类专栏： vue基础文章标签： css 前端 vue vue.js html

本文链接：https://blog.csdn.net/yangyangdt/article/details/122070944

版权

前言：vue3中动态组件代码

详细解说请移步vue3组件详解链接看目录动态组件。

官网例子：

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>动态组件</title>
		<script src="js/vue.global.js"></script>
		<style type="text/css">
			.demo {
     
			  font-family: sans-serif;
			  border: 1px solid #eee;
			  border-radius: 2px;
			  padding: 20px 30px;
			  margin-top: 1em;
			  margin-bottom: 40px;
			  user-select: none;
			  overflow-x: auto;
			}
			
			.tab-button {
     
			  padding: 6px 10px;
			  border-top-left-radius: 3px;
			  border-top-right-radius: 3px;
			  border: 1px solid #ccc;
			  cursor: pointer;
			  background: #f0f0f0;
			  margin-bottom: -1px;
			  margin-right: -1px;
			}
			.tab-button:hover {
     
			  background: #e0e0e0;
			}
			.tab-button.active {
     
			  background: #e0e0e0;
			}
			.demo-tab {
     
			  border: 1px solid #ccc;
			  padding: 10px;
			}