怎么实现vue样式只在当前页面生效

要使Vue样式仅在当前页面生效，你可以使用作用域样式或者局部样式。以下是两种常见的方法：

1. 作用域样式

Vue 支持使用带有scoped属性的<style>标签来创建作用域样式。这样，样式只会应用于当前组件的元素，不会影响其他组件。

<template>
<divclass="wrapper">
<!--在这里编写模板代码-->
</div>
</template>
<stylescoped>
.wrapper{
background-color:red;
/*其他样式规则*/
}
</style>

在上面的示例中，.wrapper类的样式只会应用于当前组件中的元素，并且不会影响其他组件。

2. 局部样式

如果你不想使用作用域样式，也可以使用局部样式。在 Vue 组件中，你可以在 `<style>` 标签内定义样式，这些样式只会应用于当前组件的元素。

<template>
<divclass="wrapper">
<!--在这里编写模板代码-->
</div>
</template>
<style>
.wrapper{
background-color:red;
/*其他样式规则*/
}
</style>

与作用域样式相比，局部样式没有 `scoped` 属性，所以它们不能自动隔离样式。但是，由于样式定义在组件文件中，它们只会应用于该组件的元素，并且不会影响其他组件。

以上是实现 Vue 样式只在当前页面生效的两种常用方法。根据你的需求和项目结构，选择适合你的方式即可。