vue写强制绑定类:class和强制绑定样式:style的效果实现

最新推荐文章于 2024-05-14 16:18:12 发布

黑爱紫秀

最新推荐文章于 2024-05-14 16:18:12 发布

阅读量377

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_62228315/article/details/127836098

版权

vue的calss和style的基本操作

:class
:style

:class

(1):class字符串绑定

代码展示：首先介绍一下，在vue里实现，简单方法不需要下载脚手架（vue cli）
直接引用这个目录下的文件即可（下载一段依赖或者直接搜索得到）
<script src="./node_modules/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				width: 200px;
				height: 200px;
			}
			.c1{
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div :class="c">字符串方式绑定</div>
		</div>
		<script src="./node_modules/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			new Vue({
			//el管理dom节点就是最大的盒子id为app
			//data放数据的
				el:"#app",
				data:{
					c:"c1",
				}
			})
		</script>
	</body>
</html>

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

(2):class数组方式绑定

根据上面大体差不多代码是这样的：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				width: 200px;
				height: 200px;
			}
			.c1{
				background-color: pink;
			}
			.c2{
				border: 5px solid darkcyan;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div class="c1 c2">普通的html css</div>
			<div :class="['c1','c2']">强制属性绑定设置 可以进行动态修改样式</div>
		</div>
		<script src="./node_modules/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			new Vue({
				el:"#app",
				data:{
				
				}
			})
		</script>
	</body>
</html>

效果如下：在这里插入图片描述

(3):class对象方式绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				width: 200px;
				height: 200px;
			}
			.c1{
				background-color: pink;
			}
			.c2{
				border: 5px solid darkcyan;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<-- false true 控制显示和隐藏 -->
			<div :class="{c1:bool1,c2:bool2}">字符串方式绑定</div>
		<script src="./node_modules/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			new Vue({
				el:"#app",
				data:{
					bool1:false,
					bool2:true,
				}
			})
		</script>
	</body>
</html>

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

:style

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				width: 200px;
				height: 200px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div :style="{background:color,fontSize:fontSize+'px'}">哈哈哈</div>
		</div>
		<script src="./node_modules/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			new Vue({
				el:"#app",
				data:{
					color:"red",
					fontSize:"50"
				}
			})
		</script>
	</body>
</html>