vue 实现可控圆形 + 样式的绑定

最新推荐文章于 2024-02-26 22:29:35 发布

邢帥兵_

最新推荐文章于 2024-02-26 22:29:35 发布

阅读量445

点赞数 2

分类专栏： vue js html 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_64875238/article/details/126981841

版权

js 同时被 3 个专栏收录

41 篇文章 28 订阅

订阅专栏

vue

20 篇文章 43 订阅

订阅专栏

html

14 篇文章 0 订阅

订阅专栏

效果图

注意！！！需要外引入 vue 文件！别忘咯

代码奉上

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.aa {
				background-color: pink;
				width: 60px;
				height: 30px;
			}

			div {
				border-radius: 50%;
				text-align: center;
				margin: 0 auto;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<h1>样式的绑定</h1>
			<input type="color" v-model="color" />
			<input type="range" min="1" max="1000" v-model="height=width">
			<!-- 对象方式 -->
			<div
				:style="{'fontSize':'48px','backgroundColor':color,'height':height+'px','width':width+'px',lineHeight:height+'px'}">
				样式的绑定
			</div>
		</div>
	</body>
	<script src="./js/vue.js"></script>
	<script>
		new Vue({
			el: "#app",
			data() {
				return {
					color: "#ffab33",
					height: 900,
					width: 900
				}
			},
		})
	</script>
</html>