修改goods.vue中的style我们会发现到goods的时候回影响到其他的div样式,添加scoped作用域可以解决这个问题,如下:
<template>
<div>
<h1>这是goods组件</h1>
</div>
</template>
<script></script>
<style scoped>
div{
color: red;
}
</style>
普通的style标签只支持普通的样式,如果想启用scss或less,需要为style设置lang属性
<template>
<div>
<h1>这是account组件</h1>
</div>
</template>
<script></script>
<style lang="scss" scoped>
body{
div{
font-style: italic;
}
}
</style>