样式绑定

class

要动态绑定

对象语法

<template>
	<p :class="{black: isBlack}"></p>  <!-- 最终渲染：<p class="black"></p> -->
</template>
<script>
	data(){
		return{
            isBlack: true
        }
    }
</script>

数组语法

<template>
	<p :class="[black]"></p>  <!-- 最终渲染：<p class="black"></p> -->
</template>
<script>
	data(){
		return{
            black: 'black'
        }
    }
</script>

直接嵌入css

<p :class="[ blank, {fontSize: '10px'} ]"></p>

对象和数组语法混合

<p :class="[ {black: isBlack}, yellow ]"></p>

style

1. 动态绑定
2. 驼峰式写法

<template>
	<p :style="styleData"></p> 
</template>
<script>
	data(){
		return{
            styleData: { 
                fontSize: '40px', // 驼峰式写法
                color: 'red'
            }
        }
    }
</script>