博客详情

vue中内联样式style的使用 (原创)

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

vue中内联样式style的使用

绑定样式 :style

			<!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">
		
			<!--vue中内联样式 :style的三种方式 -->
		
			<h1 :style="{color:'red','font-weight':200}">你好啊</h1>
		
			<h1 :style="obj1">你好啊</h1>
		
			<h1 :style="[obj1,obj2]">你好啊</h1>
		
			</div>
		
			</body>
		
			<script>
		
			var vm=new Vue({
		
			el:"#app",
		
			data:{
		
			    obj1:{color:'red','font-weight':200},
		
			    obj2:{color:'blue','font-weight':200}
		
			},
		
			methods:{
		
			}
		
			});
		
			</script>
		
			</html>