学习Vue（6）——v-bind绑定样式

最新推荐文章于 2024-06-13 15:01:17 发布

二木成林

最新推荐文章于 2024-06-13 15:01:17 发布

阅读量1.9k

点赞数 3

分类专栏： # Vue 文章标签： Vue

本文链接：https://blog.csdn.net/cnds123321/article/details/104029078

版权

Vue 专栏收录该内容

36 篇文章 3 订阅

订阅专栏

class和style是HTML元素的属性，可以设置元素的样式，前者为元素绑定CSS样式，后者为元素绑定内置样式。

而v-bind就是为HTML元素添加属性的，基于这一特性，故可以使用v-bind处理样式，并且vue做了强化，表达式的结果类型除了字符串之外，还可以是对象或数组。

简单绑定样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>学习Vue</title>
		<!-- 使用CDN引入Vue.js -->
		<script type="text/javascript" src=" https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
		<style type="text/css">
			.classStyle {
				background: #42B983;
				color: orangered;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!-- 绑定class属性 -->
			<div v-bind:class="className">绑定class</div>
			<!-- 绑定style属性 -->
			<div v-bind:style="styleValue">绑定style</div>
		</div>

		<script type="text/javascript">
			var vm = new Vue({
				el: '#app',
				data: {
					className: "classStyle",
					styleValue: "background:#888888;color:green;"
				}
			});
		</script>
	</body>
</html>

动态切换样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>学习Vue</title>
		<!-- 使用CDN引入Vue.js -->
		<script type="text/javascript" src=" https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
		<style type="text/css">
			.active {
				background: #42B983;
				color: orangered;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div v-bind:class="{active:isActive}">动态切换样式显示</div>
		</div>

		<script type="text/javascript">
			var vm = new Vue({
				el: '#app',
				data: {
					isActive: true
				}
			});
		</script>
	</body>
</html>

代码解释说明：

可以绑定多个样式：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>学习Vue</title>
		<!-- 使用CDN引入Vue.js -->
		<script type="text/javascript" src=" https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
		<style type="text/css">
			.active {
				background: #42B983;
				color: orangered;
			}
			.size {
				width:100px;
				height:100px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div v-bind:class="{active:isActive,size:isSize}">动态切换样式显示</div>
		</div>

		<script type="text/javascript">
			var vm = new Vue({
				el: '#app',
				data: {
					isActive: true,
					isSize:true
				}
			});
		</script>
	</body>
</html>

浏览器效果如下：

代码解释说明：

绑定数组

即将样式放置在一个数组内传入。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>学习Vue</title>
		<!-- 使用CDN引入Vue.js -->
		<script type="text/javascript" src=" https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
		<style type="text/css">
			.active {
				background: #42B983;
				color: orangered;
			}

			.size {
				width: 100px;
				height: 100px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!-- 绑定一个数组，数组中的值为vue中的data中的属性名 -->
			<div v-bind:class="[colorClass,sizeClass]">动态切换样式显示</div>
		</div>

		<script type="text/javascript">
			var vm = new Vue({
				el: '#app',
				data: {
					colorClass: "active",
					sizeClass: "size"
				}
			});
		</script>
	</body>
</html>

浏览器展示：

代码解释说明：

绑定样式对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>学习Vue</title>
		<!-- 使用CDN引入Vue.js -->
		<script type="text/javascript" src=" https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
		<style type="text/css">
			.active {
				background: #42B983;
				color: orangered;
			}

			.size {
				width: 100px;
				height: 100px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!-- 绑定名为classObject的样式对象 -->
			<div v-bind:class="classObject">动态切换样式显示</div>
		</div>

		<script type="text/javascript">
			var vm = new Vue({
				el: '#app',
				data: {
					classObject: {
						active: true,
						size: true
					}
				}
			});
		</script>
	</body>
</html>

代码解释说明：

vue的bind:style和bind:class用法相似。

二木成林

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
学习Vue（6）——v-bind绑定样式

class和style是HTML元素的属性，可以设置元素的样式，前者为元素绑定CSS样式，后者为元素绑定内置样式。而v-bind就是为HTML元素添加属性的，基于这一特性，故可以使用v-bind处理样式，并且vue做了强化，表达式的结果类型除了字符串之外，还可以是对象或数组。简单绑定样式<!DOCTYPE html><html> <head>...
复制链接

扫一扫