<button :class="$style['btn-lg']">{{msg}}</button>
</template>
编译出来的结果如下：
除了
$style.btn-lg这种方式会报错之外，写在驼峰（
$style.btnLg）的也会报错。上面说的 module 属性会经由Vue-loader编译后，在我们的 component 产生一个叫 $style 的隐藏的 computed 属性。也就是说，我们甚至可以在Vue生命周期的 created 钩子中取得由CSS Modules生成的 class 类名：
<script>
export default {
created () {
console.log(this.$style['btn-lg'])
}
}
</script>在浏览器的 console 中可以看到 modules 编译出来对应的类名：
利用这样的特性，在 <template> 也可以这样写：
<!-- App.vue -->
<template>
<div id="app">
<Button msg="Default Button" />
<Button :class="{[$style['btn-lg']]: isLg}" msg="Larger Button" />
<Button :class="{[$style['btn-sm']]: isSm}" msg="Smaller Button" />
</div>
</template>
<script>
import Button from './components/Button'
export default {
name: 'app',
components: {
Button
},
data () {
return {
isLg: true,
isSm: false
}
}
}
</script>
<style module>
.btn-lg {
padding: 15px 30px;
}
.btn-sm {
padding: 5px;
}
</style>这个时候编译出来的结果如下：
如上图所示，当 data 中的 isLg 属性值为 true 时， Larger Button 按钮的 padding 变了，按钮也同时变大了。除此之外，我们还可以通过 props 将 class 传到子组件中。比如像下面这样使用：
<!-- Button.vue -->
<template>
<button :class="[$style.btn, primaryClass]">{{msg}}</button>
</template>
<script>
export default {
name: 'Button',
props: {
msg: String,
primaryClass: ''
}
}
</script>
<style module>
