博客详情

vue中样式class的使用 (原创)

作者：朝如青丝暮成雪
发布时间：2019-03-23 15:27:57 文章分类：vue 阅读(1007) 评论(0)

vue中样式class的使用。

vue中绑定属性， v-bind:xxx 简写为 :xxx

vue中绑定事件，v-on:xxx 简写为 @xxx

绑定class，：class ，后面可以接表样式的数组或对象等。如下:

			<!DOCTYPE html>
		
			<html lang="en">
		
			<head>
		
			<meta charset="UTF-8">
		
			<title>Title</title>
		
			<style>
		
			    .thin{
		
			        font-weight: 200;
		
			    }
		
			    .red{
		
			        color: red;
		
			    }
		
			        .italic{
		
			         font-style:italic;   
		
			        }
		
			        .active{
		
			            letter-spacing: 0.5em;
		
			        }           
		
			</style>
		
			<script src="../lib/vue-2.2.2.js"></script>
		
			</head>
		
			<body>
		
			<div id="app">
		
			<!--1. :class="['red','thin','active'] 使用数组 -->
		
			<h1 :class="['red','thin','active']">我是一段很大的文本内容</h1>
		
			<!-- 2 :class 数组中使用三元运算符-->
		
			<h1 :class="['red','thin',f?'active':'']">我是一段很大的文本内容</h1>
		
			<!-- 3 :class=['red','thin',{active:f}] 使用数组，数组中含对象(属性为class名称,值为布尔值) -->
		
			<h1 :class="['red','thin',{active:f}]">我是一段很大的文本内容</h1>
		
			<!-- 4 :class="{red:true,thin:false,italic:true,active:false}" 
		
			     直接使用一个对象，对象中属性名为class名，值为布尔值。值为true的属性样式会被应用到元素上
		
			 -->
		
			<h1 :class="{red:true,thin:false,italic:true,active:false}">我是一段很大的文本内容</h1>
		
			<!--5 :class 直接使用对象-->
		
			<h1 :class="obj">我是一段很大的文本内容</h1>
		
			</div>
		
			</body>
		
			<script>
		
			var vm=new Vue({
		
			el:"#app",
		
			data:{
		
			f:false,
		
			obj:{red:true,thin:false,italic:true,active:false}
		
			},
		
			methods:{
		
			}
		
			});
		
			</script>
		
			</html>
		
		</span>Title<span style="color:#800000;">