vue component :is实现多个组件之间的切换（动画版）

最新推荐文章于 2024-04-01 21:58:26 发布

置顶一颗前端子

最新推荐文章于 2024-04-01 21:58:26 发布

阅读量964

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/qq_43408070/article/details/109741172

版权

下面展示一些 component :is。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
		<style>
			body{
				background-color: #DEE9FA;
			}
			.active{
				color: firebrick;
			}
		</style>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		
	</head>
	<body>
		<div id="app">
			<div>
				<ul>
					<li :class="{active:showname=='one'}" @click="showname='one'">1</li>
					<li :class="{active:showname=='two'}" @click="showname='two'">2</li>
					<li :class="{active:showname=='three'}" @click="showname='three'">3</li>
				</ul>
			</div>
				<div>
					<transition 
					enter-active-class="animated fadeInDown" mode=" in-out">
						<component :is="showname"></component>
					</transition>
				</div>
		</div>
		<template id="one">
			<div>
				<div>one</div>
				<div>onething</div>
			</div>
		</template>
		<template id="two">
			<div>
				<div>two</div>
				<div>twothing</div>
			</div>
			
		</template>
		<template id="three">
			<div>
			<div>three</div>
			<div>threething</div>	
			</div>
		</template>
	</body>
	<script type="text/javascript">
		var vm=new Vue({
			el:"#app",
			data(){
				return {
					showname:'one'
				}
			},
			methods:{
				
			},
			components:{
				'one':{
					template:'#one'
				},
				'two':{
					template:'#two'
				},
				'three':{
					template:'#three'
				}
			}
		})
	</script>
</html>

一颗前端子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue component :is实现多个组件之间的切换（动画版）

下面展示一些 component :is。<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style> body{ background-color: #DEE9FA; } .active{ color: firebrick; } </style> &lt
复制链接

扫一扫