Vue 2.0 动态组件

最新推荐文章于 2024-08-22 12:39:49 发布

嘿丷如歌

最新推荐文章于 2024-08-22 12:39:49 发布

阅读量342

点赞数

分类专栏： vue 从入门到放弃

本文链接：https://blog.csdn.net/qq_35776392/article/details/78396132

版权

vue 从入门到放弃专栏收录该内容

10 篇文章 0 订阅

订阅专栏

demo01

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="js/vue.js"></script>
	<style>
	</style>
</head>
<body>
	<div id="box">
		<input type="button" @click="a='test_a'" value="青花瓷">
		<input type="button" @click="a='test_b'" value="东风破">
		<component :is="a"></component>
	</div>


	<script>
		var vm=new Vue({
			el:'#box',
			data:{
				a:'test_a'
			},
			components:{
				'test_a':{
					template:'<h2>素胚勾勒出青花笔锋浓转淡</h2>'
				},
				'test_b':{
					template:'<h2>一盏离愁孤单伫立在窗口</h2>'
				}
			}
		});


	</script>
</body>
</html>

demo02 官网demo

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="demo">
				<button v-on:click="show = !show">
				    Toggle
				</button>
			<transition name="fade">
				<p v-if="show">hello</p>
			</transition>
		</div>
	</body>
	<style>
		.fade-enter-active,
		.fade-leave-active {
			transition: opacity .5s
		}
		
		.fade-enter,
		.fade-leave-to
		
		{
			opacity: 0
		}
	</style>
	<script>
		new Vue({
			el: '#demo',
			data: {
				show: true
			}
		})
	</script>

</html>