Vue. class与style

最新推荐文章于 2024-04-18 15:01:57 发布

honey_xi

最新推荐文章于 2024-04-18 15:01:57 发布

阅读量100

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/honey_xi/article/details/105475718

版权

class与style的绑定

<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.active{
				width: 200px;
				height: 200px;
				background-color: blue;
			}
		</style>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<!-- <div class="page"></div> -->
			<!--通过对象的方式决定是否存在某个类-->
			<div :class="{active:isTrue}"></div><!--:绑定-->
			<!-- 直接放置对象 -->
			<div class="page" :class="styleObj"></div>
			<!-- 放置数组 -->
			<div class="page" :class="styleArr"></div>
			<!-- 放置字符串 -->
			<div class="page" :class="styleStr"></div>
			<!-- 数组和对象混合使用 -->
			<div class="page" :class="styleArrObj"></div>
		</div>
		<script type="text/javascript">
			var app=new Vue({
				el:"#app",
				data:{
					isTrue:true,//可设置多个
					styleObj:{active:true,laochen:true},
					styleArr['col-xs-12','red-bg'],
					styleStr:"abc def ghi",
					styleArrObj:['abc',{active:true}]
				}
			})
		</script>
	</body>

写法一：通过对象的方式决定是否存在某个类
<div :class="{active:isTrue}"></div>
当isTrue为true时则给绑定了active的盒子显示active的样式。当isTrue为false时，则不显示active设置的样式。即通过对象的方式决定是否存在某个类。
当设置了class=“page”的同时也可以绑定：class，并且浏览器会自动拼接，即class=“page active”。

写法二：直接放置对象
<div class="page" :class="styleObj"></div>
这时浏览器自动拼接为class=“page active laochen”
注：data:{
				isTrue:true//可设置多个
				styleObj:{active:true,laochen:true,"col-lg-6":true}
			}
			当对象中-时必须使用引号将其改变为字符串

写法三：放置数组
<div class="page" :class="styleArr"></div>
这时浏览器自动拼接为class=“page col-xs-12 red-bg”，添加和删除也是使用数组方式

写法四：放置字符串
<div class="page" :class="styleStr"></div>
这时浏览器自动拼接为class=“page abc def ghi”

四种方式可以混合进行：数组和对象混合使用
<div class="page" :class="styleArrObj"></div>
当active为true时浏览器自动拼接为class=“page abc active”，当active为false时浏览器自动拼接为class=“page abc”

绑定内联式

<body>
		<div id="app">
			<div style="width: 100px;height: 100px;background: #0000FF;"></div>
			<!-- CSS内联样式变量拼接 -->
			<div style="width: 100px;height: 100px;background: #0000FF;"
				:style="{border:borderWidth+'px solid red'}"></div>
			<!-- CSS内联样式放置对象 -->
			<div :style="styleObj"></div>
			<!-- CSS数组的方式拼接 -->
			<div :style="styleArr"></div>
		</div>
		<script type="text/javascript">
			let app=new Vue({
				el:"#app",
				data:{
					borderWidth:50,
					styleObj:{
						width:"200px",
						height:"300px",
						padding:"50px",
						'background-color':"skyblue"
					}
					styleArr:[
						{
							width:"200px",
							height:"300px",
							padding:"50px",
							'background-color':"skyblue"
						},{
							border:"30px solid yellow"
						}
					]
				}
			})
		</script>
	</body>

写法一：CSS内联样式变量拼接
在浏览器中被拼接为<div style="width: 100px;height: 100px;background: #0000FF;border:50px solid red;"></div>

写法二：CSS内联样式放置对象
在浏览器中被拼接为<div style="width: 200px; height: 300px; padding: 50px; background-color: skyblue;"></div>

写法三：CSS数组的方式拼接
在浏览器中被拼接为<div style="width: 200px; height: 300px; padding: 50px; background-color: skyblue; border: 30px solid yellow;"></div>

实例：侧边栏切换

<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}
		.page{
			width: 100vw;
			height: 100vh;
			background-color: #efefef;
			position: fixed;
			left: 0;
			right: 0;
		}
		.rMenu{
			width: 20vw;
			height: 100vh;
			position: fixed;
			left: 0;
			right: 0;
			transform: translateX(100vw);
			background: skyblue;
			transition: transform 1s;
		}
		.active{
			transform: translateX(50vw);
		}
	</style>
</head>
<body>
	<div id="app">
		<div class="page">
			首页
			<button @click="toggleMenu" type="button">切换侧边栏</button>
		</div>
		<div class="rMenu":class="{active:isShow}">
			侧边栏
		</div>
	</div>
	<script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
	<script type="text/javascript">
		let app=new Vue({
			el:"#app",
			data:{
				isShow:false
			},
			methods:{
				toggleMenu:function(){
					this.isShow=!this.isShow;
				}
			}
		})
	</script>
</body>

honey_xi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue. class与style

class与style的绑定<head> <meta charset="utf-8" /> <title></title> <style type="text/css"> .active{ width: 200px; height: 200px; background-color: blue;...
复制链接

扫一扫