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


Posted in Javascript onJuly 06, 2018

如何产生

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

//// 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 属性。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
跨浏览器的设置innerHTML方法
Sep 18 Javascript
javaScript 删除字符串空格多种方法小结
Oct 24 Javascript
解决Jquery鼠标经过不停滑动的问题
Mar 03 Javascript
JavaScript基于setTimeout实现计数的方法
May 08 Javascript
JavaScript DOM 对象深入了解
Jul 20 Javascript
Vue 过渡实现轮播图效果
Mar 27 Javascript
JavaScript闭包的简单应用
Sep 01 Javascript
vue两个组件间值的传递或修改方式
Jul 04 Javascript
Vux+Axios拦截器增加loading的问题及实现方法
Nov 08 Javascript
vue实现的封装全局filter并统一管理操作示例
Feb 02 Javascript
jQuery实现移动端笔触canvas电子签名
May 21 jQuery
如何使用three.js 制作一个三维的推箱子游戏
Jul 29 Javascript
vue实现动态添加数据滚动条自动滚动到底部的示例代码
Jul 06 #Javascript
微信小程序利用canvas 绘制幸运大转盘功能
Jul 06 #Javascript
用Node提供静态文件服务的方法
Jul 06 #Javascript
vue使用监听实现全选反选功能
Jul 06 #Javascript
vue 实现数字滚动增加效果的实例代码
Jul 06 #Javascript
详解在Vue中使用TypeScript的一些思考(实践)
Jul 06 #Javascript
javascript显示动态时间的方法汇总
Jul 06 #Javascript
You might like
php获取apk包信息的方法
2014/08/15 PHP
PHP版微信第三方实现一键登录及获取用户信息的方法
2016/10/14 PHP
jQuery使用之标记元素属性用法实例
2015/01/19 Javascript
一览画面点击复选框后获取多个id值的方法
2016/05/30 Javascript
AngularJs Understanding the Controller Component
2016/09/02 Javascript
原生JS上传大文件显示进度条 php上传文件代码
2020/03/27 Javascript
AngularJS 应用模块化的使用
2018/04/04 Javascript
详解webpack 入门与解析
2018/04/09 Javascript
详解基于vue-cli3快速发布一个fullpage组件
2019/03/08 Javascript
解决vue cli4升级sass-loader(v8)后报错问题
2020/07/30 Javascript
解决vue axios跨域 Request Method: OPTIONS问题(预检请求)
2020/08/14 Javascript
jquery实现广告上下滚动效果
2021/03/04 jQuery
简单介绍Python中的len()函数的使用
2015/04/07 Python
Python3.x中自定义比较函数
2015/04/24 Python
浅析Python中将单词首字母大写的capitalize()方法
2015/05/18 Python
tensorflow 中对数组元素的操作方法
2018/07/27 Python
浅谈Python接口对json串的处理方法
2018/12/19 Python
详解Django中CBV(Class Base Views)模型源码分析
2019/02/25 Python
python定时检测无响应进程并重启的实例代码
2019/04/22 Python
Python使用百度翻译开发平台实现英文翻译为中文功能示例
2019/08/08 Python
Python3 字典dictionary入门基础附实例
2020/02/10 Python
Keras中的两种模型:Sequential和Model用法
2020/06/27 Python
python Selenium 库的使用技巧
2020/10/16 Python
美的官方商城:Midea
2016/09/14 全球购物
快时尚眼镜品牌,全国连锁眼镜店:LOHO眼镜生活
2018/10/08 全球购物
Mansur Gavriel官网:纽约市的一个设计品牌
2019/05/02 全球购物
颇特女士香港官网:NET-A-PORTER香港
2021/03/08 全球购物
授权委托书样本
2014/04/03 职场文书
文明礼貌演讲稿
2014/05/12 职场文书
学校募捐倡议书
2014/05/14 职场文书
教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
质量保证书怎么写
2015/02/27 职场文书
出纳岗位职责范本
2015/03/31 职场文书
2015年骨干教师工作总结
2015/05/26 职场文书
2016年习主席讲话学习心得体会
2016/01/20 职场文书
教你用python控制安卓手机
2021/05/13 Python