这是一个非常好用的方法
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组件帮我们完成的一个东西。

1. 让我们可以起非常简单的class名字也不怕重复。

2. 让我们的样式只作用于当前组件

原理剖析

这个可选 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> 标签内。