vue中class和style的动态使用

直接上代码（附带运行结果）：

<style lang="scss" scoped>
	div{
		padding: 10px;
		margin-top: 10px;
		line-height: 1.3;
		box-sizing: border-box;
	}
	.green{color: green;}
	.border{border: 1px solid green;}
</style>

<template>
  <div>
    <h1>class和style</h1>
	<div :class="isGreen?'green':''">使用class<br>:class="isGreen?'green':''"</div>
	<div :class="{green:isGreen,border:isBorder}">使用class,多个值在花括号中用逗号隔开<br>:class="{green:isGreen,border:isBorder}"</div>
	<div :class="[green,border]">使用class,多个值在大括号中用逗号隔开<br>:class="[green,border]"</div>
	<div :style="styleData">使用style,'-'号换成驼峰字母<br>:style="styleData"</div>
  </div>
</template>

<script>
  export default {
    data() {
		return {
			isGreen:true,
			isBorder:true,
			green:'green',
			border:'border',
			styleData:{
				color: 'white',
				backgroundColor:'green'
			}
		};
    },
    methods: {
		
	}
  };
</script>

上面代码运行结果：