当前位置 博文首页 > 小旺的博客：Vue-样式绑定

最大化 缩小

    小旺的博客：Vue-样式绑定

    作者：[db:作者] 时间：2021-08-08 16:15

    绑定class属性

    v-bind:class="{样式名称：变量}"

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>class属性绑定</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
		<style type="text/css">
			.a {
				width: 200px;
				height: 200px;
				background-color: aliceblue;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div v-bind:class="{a: isactive}"></div>
		</div>
		<script type="text/javascript">
			new Vue({
				el: '#app',
				data:{
					isactive:true
				}
			})
		</script>
	</body>
</html>

    在这里插入图片描述

    绑定多个样式

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>class属性绑定</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
		<style type="text/css">
			.a {
				width: 200px;
				height: 200px;
				background-color: aliceblue;
			}
			.b {
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div v-bind:class="{a: isactive,b:hasError}"></div>
			<hr >
			<div v-bind:class="{a: isactive,b:noError}"></div>
		</div>
		<script type="text/javascript">
			new Vue({
				el: '#app',
				data:{
					isactive:true,
					hasError:true,
					noError:false,
				}
			})
		</script>
	</body>
</html>

    在这里插入图片描述

    绑定数据里的一个对象

    v-bind:class="对象名"

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>class属性绑定</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
		<style type="text/css">
			.a {
				width: 200px;
				height: 200px;
				background-color: aliceblue;
			}
			.b {
				width: 200px;
				height: 200px;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div v-bind:class="class1"></div>
			<hr >
			<div v-bind:class="class2"></div>
		</div>
		<script type="text/javascript">
			new Vue({
				el: '#app',
				data:{
					class1:{
						a:true,
						b:false,
					},
					class2:{
						a:false,
						b:true,
					}
					
				}
			})
		</script>
	</body>
</html>

    在这里插入图片描述

    绑定一个数组

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>class属性绑定</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
		<style type="text/css">
			.a {
				width: 200px;
				height: 200px;
				background-color: aliceblue;
			}
			.b {
				width: 200px;
				height: 200px;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div v-bind:class="[c1]"></div>
			<hr >
			<div v-bind:class="[c1,c2]"></div>
		</div>
		<script type="text/javascript">
			new Vue({
				el: '#app',
				data:{
					c1:'a',
					c2:'b',
				}
			})
		</script>
	</body>
</html>

    在这里插入图片描述

    通过三目运算符绑定

    表达式 ？ 代码1 ：代码2

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="
    上一篇：小旺的博客：JavaScript语法详解
    下一篇：没有了