vue 组件中添加样式不生效的解决方法

如何产生

在开发项目中遇到在组件中添加样式不生效的情况。具体场景如下

//// vue 组件
<template>
  <div class="box" data-v-33f8ed40></div>
<template>

//我用js在上面div标签中插入一个<p class='text'>text goes here</p>

<script>
  export default {
  ...
  mounted(){
  $('.box').html('<p class="text">text goes here</p>')
   },
  ...
  }
</script>
//style ， vue组件scoped样式都会在选择器的最后加上data-v-***属性
<style scoped>
  //样式添加了scoped

  .box{
  color:red;
  }
  .text{
  color:blue;
  }
</style>

浏览器渲染的html 和 style 如下：

//html
<div class="box" data-v-33f8ed40>
  <p class='text'>text goes here</p>
</div>

//style
.box[data-v-33f8ed40]{
color:red;
}

.text[data-v-33f8ed40]{ //样式不生效，因为p标签里没有属性data-v-33f8ed40
color:blue;
}

如何解决

很简单将去掉 style 的 scoped 属性。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vuejs实现带样式的单文件组件新方法

    Vuejs实现带样式的单文件组件新方法

    本文实例为大家分享了Vuejs实现单文件组件的方法,供大家参考,具体内容如下 代码如下: example.html <script src="vue.js"></script> <div id="example"> <h3>Vue component<h3> <counter></counter> <counter></counter> </div>

  • vue里面父组件修改子组件样式的方法

    在使用 vue 的开发中,我们有时会引用外部组件,包括 UI 组件(ElementUI.iview). 当 <style> 标签有 scoped 属性时,它的 CSS 只作用于当前组件中的元素. 但是在父组件中添加 scoped 之后,父组件的样式将不会渗透到子组件中,所以在父组件中书写子组件的样式是无效果的. 一.去掉 scoped 在父组件的 <style> 中去掉 scoped 后,父组件中可以书写子组件的样式,但是你会担心这样会污染全局样式. [因为我们知道正确使用全局样式

  • vue中element组件样式修改无效的解决方法

    如下所示: <style> .detail{ .el-input__inner { height: 48px; } } </style> 直接写style注意不加scoped,然后用一个组件最外层的class包裹住,就不会改到所有的组件的样式了. 以上这篇vue中element组件样式修改无效的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: Vue 组件间的样式冲突污染 浅谈vue中改elementUI默认样式引发的st

  • Vue 组件间的样式冲突污染

    Vue 组件间的样式冲突污染

    一.污染是如何产生的? 得益于 Vue-loader,在 Vue 中可以使用类似于 Web Component 的组件化写法, <template></template><style></style><script></script> ,在大多数情况下,我们希望组件间定义的样式是相互隔离的,在 Weex 当中的确如此,组件天生隔离,可是在 Vue 当中,运行的载体还是浏览器,所有的样式类还是会通过 style 标签插入头部,影响全局,

  • 浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法

    vue-cli中已经内置配置好了sass 以及lass的配置.如果需要的话直接下载两个模块就可以了,webpack它会根据 lang 属性自动用适当的加载器去处理. 如果需要使用sass,则安装: npm install node-sass --save-dev npm install sass-loader --save-dev 如果需要使用less,则安装: npm install less --save-dev npm install less-loader --save-dev sass

  • vue 组件中添加样式不生效的解决方法

    如何产生 在开发项目中遇到在组件中添加样式不生效的情况.具体场景如下 //// vue 组件 <template> <div class="box" data-v-33f8ed40></div> <template> //我用js在上面div标签中插入一个<p class='text'>text goes here</p> <script> export default { ... mounted(){

  • vue组件中的样式属性scoped实例详解

    Scoped CSS Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范. vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当前组件元素 它是通过使用PostCSS来改变以下内容实现的: <style scoped> .example { color: red; } </style> <template> <div class="example">hi</di

  • 小程序自定义组件全局样式不生效的解决方法

    小程序自定义组件全局样式不生效的解决方法

    目录 太长不看版 组件样式隔离 demo 试验 优先级 页面的隔离配置 参考资料 在使用原生框架开发小程序时遇到一个问题,在 app.wxss 中定义的全局样式在自定义组件中不生效.后来发现是由于小程序组件样式隔离的配置导致的. 太长不看版 在组件的 json 文件中添加如下配置,全局样式即可生效. // component.json "styleIsolation": "apply-shared" 如果偏好在 js 文件中进行配置,或版本号 < 2.10.1

  • element-ui 的el-button组件中添加自定义颜色和图标的实现方法

    我使用的element-ui的版本是V1.4.13. 如上图所示,如果使用el-button,加颜色是可以通过设置type属性的值,加图标就设置icon属性的值. 现在产品给了一个需求,就是自定义的很多种类别,不同的类别的按钮显示不同的颜色和图标.如下图所示: 为了方便开发,目前的解决方案是:添加一个自定义全局指令,同时在element-ui源码中,加入对应的组件.开发人员在开发时只要在type中添加不同的类的值,就能添加上颜色和图标. 1.在element-ui的button源码中加了自定义指

  • 在Vue组件中获取全局的点击事件方法

    使用场景: 在Vue组件中点击某元素之外的地方移除该元素 需求: 如上图所示,"用户列表"页面有三个Vue组件组成,分别是"菜单组件","导航组件"和"列表组件".其中"列表组件"中包含一个"下拉菜单",当我们点击"下拉菜单"以外的区域隐藏下拉菜单. 解决方法一: 出现"下拉菜单"的同时,建一个透明的遮罩层,然后只有"下拉菜单"

  • Vue组件更新数据v-model不生效的解决

    目录 组件更新数据v-model不生效 问题描述 原因分析 方法一 方法二 方法三 关于v-model失效的问题 解决办法 组件更新数据v-model不生效 问题描述 在使用Vue双向绑定(v-model)功能时,封装子组件通过Inject功能使用了父组件中的 model 中的属性进行双向绑定,此时在程序中去更新model的某个属性的值,发现子组件没有实时渲染. 原因分析 由于 JavaScript 的限制,Vue 不能检测数组和对象的变化.尽管如此我们还是有一些办法来回避这些限制并保证它们的响

  • vue项目中使用vue-i18n报错的解决方法

    vue项目中使用vue-i18n报错的解决方法

    前言 Vue-i18n大家应该都不陌生,Vue-i18n安装的安装方法如下: npm install vue-i18n --save 然而最近在vue项目中使用vue-i18n的时候,居然报错了,通过查找相关的资料终于找到了解决的方法,下面话不多说了,来一起看看详细的介绍吧 发现问题 iview-admin框架克隆到本地,添加路由的时候,稍不注意就会遇到以下情况: Value of key 'xxx' is not string! Cannot translate the value of ke

  • Vue项目中使用addRoutes出现问题的解决方法

    目录 前言 一.404页面 1. 出现的原因 2. 解决方案 二.刷新白屏 1. 出现原因 2. 解决方案 三.路由重复 1.  出现原因 2. 解决方案 总结 前言 addRoutes官方介绍: 函数签名: router.addRoutes(routes: Array<RouteConfig>) 动态添加更多的路由规则.参数必须是一个符合 routes 选项要求的数组. 这两天做vue后台权限管理系统的时候,发现使用vue提供的addRoute添加路由以后,会出现两个bug,一起来看看如何解

  • vue组件中节流函数的失效的原因和解决方法

    今天使用节流函数的时候遇见了一个问题,搞了半天才找到原因,所以在这里做个总结. 节流函数 浏览器的一些事件,如:resize,scroll,mousemove等.这些事件触发频率太过频繁,绑定在这些事件上的回调函数会不停的被调用,加重浏览器的负担,导致用户体验非常糟糕.所以先贤们发明了节流函数,简单版本如下: function throttle (f, wait = 200) { let last = 0 return function (...args) { let now = Date.no

  • Vue项目中使用iView组件库设置样式不生效的解决方案

    目录 使用iView组件库设置样式不生效问题 解决使用iview或者element-ui组件修改样式不生效 1.样式如果定义为 2.样式如果没有定义 使用iView组件库设置样式不生效问题 找到要设置样式的类名,直接按照下面写法设置就可以了! <style lang="less" scoped> @deep: ~'>>>'; @{deep}.ivu-transfer-operation {     visibility: hidden !important

随机推荐