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扩展插件Validate 2通过参数设置验证规则
Sep 05 Javascript
javascript常用函数(1)
Nov 04 Javascript
AngularJS入门教程之AngularJS表达式
Apr 18 Javascript
有关easyui-layout中的收缩层无法显示标题的解决办法
May 10 Javascript
javascript判断图片是否加载完成的方法推荐
May 13 Javascript
jQuery设置聚焦并使光标位置在文字最后的实现方法
Aug 02 Javascript
在 Vue 应用中使用 Netlify 表单功能的方法详解
Jun 03 Javascript
微信小程序国际化探索实现(附源码地址)
May 20 Javascript
Jquery ajax书写方法代码实例解析
Jun 12 jQuery
JS制作简易计算器的实例代码
Jul 04 Javascript
浅谈nuxtjs校验登录中间件和混入(mixin)
Nov 06 Javascript
JavaScript实现简单图片切换
Apr 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 disk_free_space 返回目录可用空间
2010/05/10 PHP
浅析PHP的静态成员函数效率更高的原因
2014/06/13 PHP
phpmailer发送邮件之后,返回收件人是否阅读了邮件的方法
2014/07/19 PHP
php随机显示指定文件夹下图片的方法
2015/07/13 PHP
PHP curl模拟登录带验证码的网站
2015/11/30 PHP
PHP命名空间namespace的定义方法详解
2017/03/29 PHP
深入理解JavaScript作用域和作用域链
2011/10/21 Javascript
基于jquery的跟随屏幕滚动代码
2012/07/24 Javascript
如何阻止复制剪切和粘贴事件为了表单内容的安全
2013/05/23 Javascript
js获取指定日期前后的日期代码
2013/08/20 Javascript
jquery滚动条插件jScrollPane的使用介绍
2013/11/08 Javascript
JQuery 图片滚动轮播示例代码
2014/03/24 Javascript
jQuery根据元素值删除数组元素的方法
2015/06/24 Javascript
JS实现常见的TAB、弹出层效果(TAB标签,斑马线,遮罩层等)
2015/10/08 Javascript
JavaScript获取当前运行脚本文件所在目录的方法
2016/02/03 Javascript
关于JS中的apply,call,bind的深入解析
2016/04/05 Javascript
功能强大的Bootstrap使用手册(一)
2016/08/02 Javascript
基于vue.js实现图片轮播效果
2016/12/01 Javascript
想用好React的你必须要知道的一些事情
2017/07/24 Javascript
vuex的使用及持久化state的方式详解
2018/01/23 Javascript
在elementui中Notification组件添加点击事件实例
2020/11/11 Javascript
[02:51]DOTA2战队出征照拍摄花絮 TI3明星化身时尚男模
2013/07/22 DOTA
[52:09]2014 DOTA2华西杯精英邀请赛 5 25 NewBee VS DK第二场
2014/05/26 DOTA
[49:35]KG vs SECRET 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
python实现超简单的视频对象提取功能
2018/06/04 Python
pytorch 限制GPU使用效率详解(计算效率)
2020/06/27 Python
Django websocket原理及功能实现代码
2020/11/14 Python
如何通过Python实现RabbitMQ延迟队列
2020/11/28 Python
如何用 Python 制作 GitHub 消息助手
2021/02/20 Python
在阿尔卑斯山或希腊度过快乐假期:Alpine Elements
2019/12/28 全球购物
大学军训感言
2014/01/10 职场文书
加工操作管理制度
2014/01/19 职场文书
地球物理学专业推荐信
2014/09/08 职场文书
《好妈妈胜过好老师》:每个孩子的优秀都是有源头的
2020/01/03 职场文书
python实战之90行代码写个猜数字游戏
2021/04/22 Python
深入理解Pytorch微调torchvision模型
2021/11/11 Python