v-bind的用法、省略和class属性

首先应该知道HTML元素“属性”的概念：

HTML中的元素是有属性的；这些额外的属性值可以配置元素或者以各种方式来调整元素的行为，进而满足用户所需的标准。

比如：

.note {
    font-style: italic;
    font-weight:bold;
}

<div v-bind:class="node">

</div>

这个例子就展示了全局属性class的用法，下面看看Vue里面class的一个例子：

<style>
.note {
    &-test1 {
        font-style: italic;
        font-weight: bold;
    }
    
    &-test2 {
        background: rgb(255, 0, 0, .25);
        padding: 10px;
    }
}
</style>

<template>
<div id="app">
<div v-bind:class="${name}-test1">

</div>
<div v-bind:class="${name}-test2">

</div>
</div>
</template>

<script>
const name = note;
export default {
	props: {

	},
	data() {
		return {
			name
		}
	}
}
</script>

这里需要注意的是，v-bind指令的写法可以省略为：

<div :class="${name}-test1">

/div>