Vue3 #append .el-input-group__append 样式修改不影响其他页面 - 两种方法

在Vue.js中，如果你想在一个页面中修改一个类名，而不影响其他页面中具有相同类名的元素，可以使用以下两种方法：

1. 使用作用域样式（Scoped Style）：在Vue组件中，可以通过将样式代码包装在<style scoped></style>标签中，来将样式限定在当前组件的作用域内。这样做可以确保样式只适用于当前组件，而不会影响其他组件。

<template>
  <div>
    <input type="text" class="el-input-group__append" />
  </div>
</template>

<style scoped>
.el-input-group__append {
  /* 样式代码 */
}
</style>

2. 使用唯一的类名：如果你想在多个页面中使用相同的类名，但只想在特定页面修改样式，可以给特定页面的元素添加一个唯一的类名，然后通过这个唯一的类名来修改样式。这样做可以确保只有特定页面的元素受到影响，而其他页面的元素不受影响。

<template>
  <div>
    <input type="text" class="el-input-group__append my-page-append" />
  </div>
</template>

<style>
.my-page-append {
  /* 样式代码 */
}
</style>

通过上述方法，你可以在Vue.js中修改特定页面的类名样式，而不会影响其他页面中具有相同类名的元素。