这是一个非常好用的方法
eg
<template>
<div class="nav">
<router-link to="/money">记账</router-link>|
<router-link to="/labels">标签</router-link>|
<router-link to="/statistics">数据</router-link>
</div>
</template>
<script>
export default {
name: "Nav"
}
</script>
<style scoped lang="scss">
.nav{border: 1px red solid}
</style>
这里的scoped可以使得class为nav的这个div与众不同
拥有神秘代码
让后面出现
data-v-65af85a3，这个是vue的scoped组件帮我们完成的一个东西。
让我们可以起非常简单的class名字也不怕重复。
让我们的样式只作用于当前组件
原理剖析
这个可选 scoped 属性会自动添加一个唯一的属性 (比如 data-v-65af85a3) 为组件内 CSS 指定作用域，
编译的时候 .nav{border: 1px red solid} 会被编译成类似 .nav[data-v-65af85a3]:{border: 1px red solid}。
而上面的<div class="nav" >后面则会自动变成<div class="nav" data-v-65af85a3>
所以才会匹配成功。
文档提到，Vue 的单文件组件里的样式设置是非常灵活的。通过 vue-loader，你可以使用任意预处理器、后处理器，甚至深度集成 CSS Modules——全部都在 <style> 标签内。
