可以在 “style” 标签中添加 “scoped” 属性。

<style scoped>
.red {
color: #f00;
}
</style> <template>
<div class="container">
<h2 class="red">{{msg}}</h2>
</div>
</template> <script> export default {
data () {
return {
msg: 'Hello World!'
}
}
}
</script>

效果如下:

页面显示

html结构

css结构

vue 组件样式如何不影响全局的更多相关文章

  1. vue组件样式scoped

    1.vue组件中的样式如果没加scrped,样式代表的是全局样式(避免组件之间样式的冲突).加了属性代表是模块化的. 其他组件引用button组件 上面分析了单个组件渲染后的结果,那么组件互相调用之后 ...

  2. vue组件样式添加scoped属性之后,无法被父组件修改。或者无法在本组件修改element UI样式

    在vue开发中,需要使用scoped属性避免样式的全局干扰,但是这样在父组件中是无法被修改的,不仅如此如果项目中用了UI框架比如element Ui,这个时候在本组件也无法修改样式,因为权重问题.但是 ...

  3. vue组件如何被其他项目引用

    自己写的vue组件怎么才能让其他人引用呢,或者是共用组件如何让其他项目引用.本文就粗细的介绍下,如有疑问欢迎共同讨论.在这里你能了解下如下知识点: 1. 如何发布一个包到npmjs仓库上 2.如何引用 ...

  4. vue组件中的样式属性:scoped,解决在父组件中无法修改子组件样式问题

    Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范. vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当前组件元素,它是通过使 ...

  5. vue组件中的样式属性--scoped

    Scoped CSS Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范. vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当 ...

  6. vue中修改子组件样式

    一.问题叙述 项目里需要新添加一个表单页面,里面就只是几个select,这个几个select是原本封装好的组件,有自己原本的样式,而这次的原型图却没有和之前的样式统一起来,需要微调一下,这里就涉及到父 ...

  7. 第七十三篇:解决Vue组件中的样式冲突

    好家伙, 1.组件之间的样式冲突 默认情况下,写在.vue组件中的样式会全局生效,因此很容易造成多个组件之间的样式冲突问题. 举个例子: 我们在Left.vue的组件中添加样式 <templat ...

  8. vue scoped 穿透_vue 修改内部组件样式问题

    何为scoped? 在vue文件中的style标签上,有一个特殊的属性:scoped.当一个style标签拥有scoped属性时,它的CSS样式就只能作用于当前的组件,也就是说,该样式只能适用于当前组 ...

  9. vue+Elment-UI,修改element组件样式

    在用vue开发项目过程中,我们总是避免不了的会使用到elementUI,它里面提供的一些组件都为我们的开发带来了很大的便利,但是,当有时候我们需要使用这些组件的同时又要修改下组件的UI样式的话,我们该 ...

随机推荐

  1. FPipe端口转发

    目录 0x01 FPipe介绍 0x02 端口转发 0x03 msf正向上线 注: 边界机器 win08 192.168.222.175 内网机器 win7 192.168.222.137 msf机器 ...

  2. Android Studio [RecyclerView/列表视图]

    LinearRecyclerViewActivity.java package com.xdw.a122.recyclerview; import android.graphics.Rect; imp ...

  3. Spring boot 官网学习笔记 - Spring Boot 属性配置和使用(转)-application.properties

    Spring Boot uses a very particular PropertySource order that is designed to allow sensible overridin ...

  4. Spring MVC-从零开始-文件上传(未完待续)

    Spring MVC-从零开始-文件上传(未完待续)

  5. vue 条件渲染方式

    1.通过class绑定 <div :class="{'div-class': this.align == 'center'}"></div> 对应的css ...

  6. .NET进阶篇-丑话先说,Flag先立

    作为开发者,工作了几年,也总觉得技术栈和刚毕业区别不大,用的技术还都是N年前的,每每看到新东西,也只心里哇塞惊叹一下,然后就回归于忙碌.怪自己的技术池太浅,热门的令人称奇的技术也都是在其他巨人的肩膀上 ...

  7. spark针对web日志正则匹配

    针对于web日志做分析是学习spark常用练习项目.此文介绍web日志正则匹配相关小提示.  实例测试 从网上找了一个access日志案列 218.19.140.242 - - [10/Dec/201 ...

  8. Spark 学习笔记之 map/flatMap/filter/mapPartitions/mapPartitionsWithIndex/sample

    map/flatMap/filter/mapPartitions/mapPartitionsWithIndex/sample:

  9. Spring DestorySingleton流程

     第一节介绍Spring启动(链接)时,介绍AbstractApplicationContext的过销毁过程,主要是调用了内部的destroyBeans方法,这节便来介绍bean的销毁过程. 一.销毁 ...

  10. Linux入门(磁盘与挂载)

    Linux入门之 磁盘管理与挂载   在我们使用计算机或者是服务器时,总会需要接入外部存储的时候,正如我们使用的移动硬盘.U盘.接入手机等,就是一个接入外部存储的过程.上述这些在接入Windows时我 ...