vue修改html片段的样式无效,vue 组件中添加样式不生效的解决方法

如何产生

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

vue 组件

//我用js在上面div标签中插入一个

text goes here

export default {

...

mounted(){

$('.box').html('

text goes here

...

}

//style ， vue组件scoped样式都会在选择器的最后加上data-v-***属性

//样式添加了scoped

.box{

color:red;

}

.text{

color:blue;

}

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

//html

text goes here

//style

.box[data-v-33f8ed40]{

color:red;

}

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

color:blue;

}

如何解决

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

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

vue修改html片段的样式无效,vue 组件中添加样式不生效的解决方法相关推荐

vue爬坑之父组件向子组件异步传参子组件中拿不到值的解决方法
做项目时候遇到一件怪事: 父组件向子组件<dialog-info/>传个参数arrdata,是个数组因为是Array类型的参数,子组件中进行了接收,并且default通过函数返回一个空数 ...
MYSQL修改编码为utf8无效往表中插入汉字还是失败的解决方法
调了很久才发现核心错误所在,很坑!! 1.错误现象 Incorrect string value: '\xE7\xA8\x8B\xE5\xBA\x8F-' for column 'course' at ...
vue组件中的样式属性：scoped，解决在父组件中无法修改子组件样式问题
Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范. vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当前组件元素,它是通过使 ...
Vue中关于自定义组件定义@click事件不生效的解决办法
.native修饰符 -- 侦听组件根元素上的原生事件当你给一个vue组件或者是自定义组件绑定事件的时候,要加上native,如果是普通的html元素,就不需要比如:如果使用router-link ...
vue 父刷新子_父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法...
场景: 我实际用到的是这样的,我父组件引用子组件related,父组件调用获取页面详情的方法,更新了state值related,子组件根据该related来渲染相关新闻内容,但是页面打开的时候总是先加 ...
vue中引用tinymce图标不显示解决方法
vue中引用tinymce图标不显示解决方法通过官网查到一篇博客,按照上面步骤可以实现tinymce富文本编辑器的封装和使用. https://www.cnblogs.com/zhongchao66 ...
微信小程序怎么修改自定义组件中的样式
在微信小程序中我们经常要用到自定义组件,但是有时我们因为引用的地方不同可能组件的一些样式也要修改,比如颜色,高度,宽度等来适合不同的页面,有没有办法来修改自定义组件中的样式呢,很显然是有的,我们要用到 ...
mysql 修改配置生效_MySQL修改my.cnf配置不生效的解决方法
本文实例讲述了MySQL修改my.cnf配置不生效的解决方法.分享给大家供大家参考,具体如下: 一.问题: 修改了 my.cnf 配置文件后,却不生效,这是怎么回事? 二.原因: 我们注意到,这里只说 ...
java环境变量修改不了_win10系统安装了jdk,修改环境变量配置不生效的解决方法...
Win10系统安装了jdk,修改环境变量配置不生效怎么办?今天系统天地给大家分享win10系统安装了jdk,修改环境变量配置不生效的解决方法. 访问: win10系统安装了jdk,修改环境变量配置不生 ...

vue修改html片段的样式无效,vue 组件中添加样式不生效的解决方法

vue修改html片段的样式无效,vue 组件中添加样式不生效的解决方法相关推荐

最新文章

热门文章