vue中的动态组件

最新推荐文章于 2024-06-03 13:30:00 发布

Haikin Tei

最新推荐文章于 2024-06-03 13:30:00 发布

阅读量151

点赞数

文章标签： vue vue.js

本文链接：https://blog.csdn.net/qq_42683507/article/details/117979987

版权

动态组件可以用于一些页面，这里我们用常见的账号登录&手机验证码登录页面来实现动态组件。

①编写HTML并且创建component动态组件

	<body>
		<div id="login">
			<ul>
				<li @click="msg='account'">账号登录</li>
				<li @click="msg='message'">短信验证码登录</li>
			</ul>
			
			<component :is="msg"></component>
		</div>
	</body>

②在body中编写两个template

		<template id="account">
			<div>
				<input type="text" placeholder="请输入账号">
				<input type="password" placeholder="请输入密码">
				<button>登录</button>
			</div>
		</template>
		<template id="message">
			<div>
				<input type="text" placeholder="请输入账号">
				<input type="password" placeholder="请输入验证码">
				<button>获取验证码</button>
				<button>登录</button>
			</div>
		</template>

③在script内实例化两个对象

	<script src="vue.js"></script>
	<script>
		var account={
			template:'#account'
		}
		
		var message={
			template:'#message'
		}
	})
	</script>

④在script中创建vue

	<script>
		new Vue({
			el:'#login',
			data:{
				msg:'message'
			},
			components:{
				'account':account,
				'message':message
			}
		})
	</script>

结果：
在这里插入图片描述

Haikin Tei

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue中的动态组件

动态组件可以用于一些页面，这里我们用常见的账号登录&手机验证码登录页面来实现动态组件。①编写HTML并且创建component动态组件 <body> <div id="login"> <ul> <li @click="msg='account'">账号登录</li> <li @click="msg='message'">短信验证码登录</li> </ul>
复制链接

扫一扫