解决vue2组件间相同命名的class样式干扰的问题

1、问题描述：在组件a.vue和b.vue中a.vue<style>.top-notice {height: 38px;}</style>b.vue<style>.top-notice {height: 44px;}</style>出现上面情况时，组件a和组件b之间的样式会互...

走_开

3104人浏览 · 2019-07-15 16:21:39

走_开 · 2019-07-15 16:21:39 发布

1、问题描述：

在组件a.vue和b.vue中

a.vue

<style>
  .top-notice {
    height: 38px;
  }
</style>


b.vue

<style>
  .top-notice {
    height: 44px;
  }
</style>

出现上面情况时，组件a和组件b之间的样式会互相干扰

2、解决方法

将<style></style>改为<style scoped></style>,即可解决。scoped表此样式只在当前页面有效。

3、Vue Loader官网文档

https://vue-loader.vuejs.org/zh/guide/scoped-css.html

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^