【Vue自定义开关组件】

最新推荐文章于 2023-08-10 17:44:08 发布

一杯雪花勇闯天涯

最新推荐文章于 2023-08-10 17:44:08 发布

阅读量592

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/u014265398/article/details/117044796

版权

vue 专栏收录该内容

41 篇文章 2 订阅

订阅专栏

系列文章目录

Vue自定义开关组件

文章目录

系列文章目录
前言
一.源代码
二.效果

前言

Vue自定义开关组件

一.源代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>自定义开关组件</title>
	</head>
	<body>
		<div id="app">
			<switch-button></switch-button>
			<switch-button></switch-button>
			<switch-button></switch-button>
			<switch-button></switch-button>
		</div>
	</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
	//注册Vue 全局组件
	Vue.component('switch-button',{
		template:'<div v-if="close" v-on:click="show(1)" style="width: 120px;height: 36px;background: dimgrey;border-radius: 18px;margin-top: 10px;"><div style="width:36px;height: 36px;border-radius: 18px;background: white;"></div></div><div   v-on:click="show(2)" v-else style="width: 120px;height: 36px;background: steelblue;border-radius: 18px;margin-top: 10px;"><div style="width:36px;height: 36px;border-radius: 18px;background: white;margin-left: 85px;"></div>',
		data:function() {
			return {
				close:true
			}
		},
		methods:{
			show:function(num) {
				if (num == 1) {
					this.close = false;
				} else {
					this.close = true;
				}
			}
		}
	})
	new Vue({
		el:'#app',
	});
</script>

二.效果

在这里插入图片描述

一杯雪花勇闯天涯

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【Vue自定义开关组件】

系列文章目录Vue自定义开关组件提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录系列文章目录前言一.源代码二.效果前言Vue自定义开关组件一.源代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>自定义开关组件</title> </head> <body> <div id
复制链接

扫一扫