04Bind改变样式

v-bind：属性名可以简写成 ：属性名，
v-bind用于绑定数据和元素属性

样式
<style type="text/css">
			p{
				width: 200px;
				height: 200px;
				border: 1px solid blue;
			}
			.bg{
				background-color: darkseagreen;
			}
			.color{
				color: gray;
			}
		</style>
		HTML和JavaScript部分
<div id="app">
			<!--与style的相对应-->
			<p v-bind:class="{bg:isbg,color:iscolor}">第一个p标签</p>
			<!--数组形式添加-->
			<p v-bind:class="classarr">第二个p标签</p>
			<!--将样式写成变量-->
			<p v-bind:style="{background:mybg}">第三个p标签</p>
			<!--style使用样式-->
			<p v-bind:style="styles">第四个p标签</p>
		</div>
		<script type="text/javascript">
			var app=new Vue({
				el:"#app",
				data:{
					//给一个状态
					iscolor:true,
					isbg:false,
					classarr:['bg','color'],
					mybg:"yellow",
					styles:{
						color:"blue",
						background:"grey"
					}	
				}
			})
		</script>