学习小程序开发定制计划第57天，Vue实例(checkbox按钮封装)

最新推荐文章于 2024-05-16 03:01:14 发布

zkelm.com

最新推荐文章于 2024-05-16 03:01:14 发布

阅读量103

点赞数 2

文章标签： vue.js javascript html5

本文链接：https://blog.csdn.net/zkelm/article/details/120465241

版权

使用Vue封装一个checkbox小功能，选择的时候变背景色，在对齐上面搞了我好久，最终还是使用了vertical-align：middle 解决了问题

以下是代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>制作一个按钮组件</title>
		<script src="https://unpkg.com/vue/dist/vue.js"></script>
		<style type="text/css">
		div.box{
			border: 1px solid #888;
			display: inline-block;
			margin:0 auto;	
			
			padding:5px 20px 5px 10px;
			border-radius: 5px;
			vertical-align:middle;
		}
		
		div.box input[type='checkbox']{
			width: 30px;
			height: 30px;
			vertical-align:middle;
			
			
		}
		label{
			height: 30px;
			line-height: 30px;
			vertical-align:middle;
			color: #333;
			
		}
		.Vchecked{
			background-color: #008000;
			border: 1px solid #008000 !important;
		
		}
		div.Vchecked label{
			color:#fff;
		}
		</style>
	</head>
	<body>
		<div :class={Vchecked:Vcheck} id="app" class="box">
			<input v-model:checked="Vcheck" type="checkbox" id="mcheckbox"/><label for="mcheckbox">开启暴富模式</label>
		</div>
		<script type="text/javascript">
			var vm=new Vue({
				el:"#app",
				data:{
					Vcheck:false
				}
			})
		</script>
	</body>
</html>

效果显示
南宁才聚软件:www.zkelm.com

才聚软件：www.zkelm.com 每天进步1% ，坚持走定制开发路线. day day up！

zkelm.com

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习小程序开发定制计划第57天，Vue实例(checkbox按钮封装)

使用Vue封装一个checkbox小功能，选择的时候变背景色，在对齐上面搞了我好久，最终还是使用了vertical-align：middle 解决了问题以下是代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>制作一个按钮组件</title> <script src="https://unpkg.com/vue/dist/vue.js"&g
复制链接

扫一扫