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 相关文章推荐
jQuery 性能优化指南(3)
May 21 Javascript
基于JQuery的动态删除Table表格的行和列的代码
May 12 Javascript
Google的跟踪代码 动态加载js代码方法应用
Nov 12 Javascript
PhotoShop给图片自动添加边框及EXIF信息的JS脚本
Feb 15 Javascript
jQuery实现图片预加载效果
Nov 27 Javascript
jQuery实现简单滚动动画效果
Apr 07 Javascript
JS读取XML文件数据并以table形式显示数据的方法(兼容IE与火狐)
Jun 02 Javascript
详解webpack+vue-cli项目打包技巧
Jun 17 Javascript
详解vue中使用express+fetch获取本地json文件
Oct 10 Javascript
vue 父组件中调用子组件函数的方法
Jun 06 Javascript
使用 Vue 实现一个虚拟列表的方法
Aug 20 Javascript
利用JavaScript写一个简单计算器
Nov 27 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递归创建多级目录
2015/11/05 PHP
js+FSO遍历文件夹下文件并显示
2007/03/07 Javascript
picChange 图片切换特效的函数代码
2010/05/06 Javascript
基于jquery的监控数据是否发生改变
2011/04/11 Javascript
js自执行函数的几种不同写法的比较
2012/08/16 Javascript
处理及遍历XML文档DOM元素属性及方法整理
2013/08/23 Javascript
js设置cookie过期及清除浏览器对应名称的cookie
2013/10/24 Javascript
js控制input输入字符解析
2013/12/27 Javascript
jQuery 获取兄弟元素的几种不错方法
2014/05/23 Javascript
浅谈setTimeout 与 setInterval
2015/06/23 Javascript
js验证框架实现代码分享
2016/05/18 Javascript
Bootstrap栅格系统使用方法及页面调整变形的解决方法
2017/03/10 Javascript
vue.js分页中单击页码更换页面内容的方法(配合spring springmvc)
2018/02/10 Javascript
详解Puppeteer 入门教程
2018/05/09 Javascript
angular.js实现列表orderby排序的方法
2018/10/02 Javascript
jquery实现动态改变css样式的方法分析
2019/05/27 jQuery
JavaScript如何获取一个元素的样式信息
2019/07/29 Javascript
element-ui 本地化使用教程详解
2019/10/28 Javascript
微信小程序接入腾讯云验证码的方法步骤
2020/01/07 Javascript
解决vue初始化项目一直停在downloading template的问题
2020/11/09 Javascript
Python闭包实现计数器的方法
2015/05/05 Python
详解详解Python中writelines()方法的使用
2015/05/25 Python
Python3.5运算符操作实例详解
2019/04/25 Python
浅谈多卡服务器下隐藏部分 GPU 和 TensorFlow 的显存使用设置
2020/06/30 Python
opencv 图像加法与图像融合的实现代码
2020/07/08 Python
澳大利亚玩具剧场:Toy Playhouse
2019/03/03 全球购物
印度在线购买电子产品网站:Croma
2020/01/02 全球购物
保密承诺书
2014/03/27 职场文书
幼儿园小班评语
2014/04/18 职场文书
小学德育工作经验交流材料
2014/05/22 职场文书
房产协议书范本2014
2014/09/30 职场文书
社区元宵节活动总结
2015/02/06 职场文书
2015法院个人工作总结范文
2015/05/25 职场文书
服务行业标语口号
2015/12/26 职场文书
如何给HttpServletRequest增加消息头
2021/06/30 Java/Android
FFmpeg视频处理入门教程(新手必看)
2022/01/22 杂记