Vue第三天之属性-优快云博客

该文介绍了Vue.js中使用v-bind进行属性绑定，包括对class和style属性的处理方法。例如，通过变量、数组和JSON形式来动态设置元素的class和内联样式，并提供了示例代码展示如何在Vue实例的数据对象中定义和使用这些样式。

2. 属性

2.1 属性绑定和属性简写

v-bind 用于属性绑定， v-bind:属性=“”

属性的简写：
v-bind:属性=“” 简写为 :属性=“”

2.2 class和style属性

如下：

<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<style>
			.aa{
				color: red;
			}
			.bb{
				background: #007AFF;
			}
			.cc{
				font-size: 20px;
			}
		</style>
	</head>

	<body>
		<div class="mui-content" id="content">
			<!-- 
			 class属性
			 -->
			<!-- <div :class="aa">hello vue</div> --><!-- 这种方式不可以，Vue的属性绑定不能直接使用css样式 -->
			
			<!-- 方式1：变量形式 -->
			<div :class="class1">hello vue</div>
			
			<!-- 方式2：数组形式，同时引用多个 -->
			<div :class="[class1,class2]">hello vue</div>
			
			<!-- 方式3：json形式，常用！！！ -->
			<div :class="{aa:false,bb:true,cc:num>4}">hello vue</div>
			
			<!-- 
			 style属性
			 -->
			<div :style="style1">hello vue</div>
			<div :style="[style1,style2]">hello vue</div>
		</div>
		<script src="../js/mui.min.js"></script>
		<script src="../js/vue.js"></script>
		<script type="text/javascript">
			mui.init();
			var vm=new Vue({
				el:"#content",
				data:{
					class1:"aa",
					class2:"bb",
					num:5,
					style1:{color:'green',fontSize:'30px'},
					style2:{backgroundColor:'gray'}
				}
			})
		</script>
	</body>

</html>