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 相关文章推荐
Javascript实现的鼠标经过时播放声音
May 18 Javascript
js/jquery判断浏览器的方法小结
Sep 02 Javascript
JavaScript中的getDay()方法使用详解
Jun 09 Javascript
JavaScript实现的圆形浮动标签云效果实例
Aug 06 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记9)
Dec 24 Javascript
BootStrap 可编辑表Table格
Nov 24 Javascript
详解jQuery中的事件
Dec 14 Javascript
vue.js异步上传文件前后端实现代码
Aug 22 Javascript
angularJs使用ng-repeat遍历后选中某一个的方法
Sep 30 Javascript
VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
Nov 30 Javascript
js中的面向对象之对象常见创建方法详解
Dec 16 Javascript
Vue-cli3多页面配置详解
Mar 22 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
修改Zend引擎实现PHP源码加密的原理及实践
2008/04/14 PHP
PHP+MySql+jQuery实现的&quot;顶&quot;和&quot;踩&quot;投票功能
2016/05/21 PHP
获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft (For:IE5+ FF1 )[
2006/12/22 Javascript
JS 自定义带默认值的函数
2011/07/21 Javascript
JQuery处理json与ajax返回JSON实例代码
2014/01/03 Javascript
javascript实现列表滚动的方法
2015/07/30 Javascript
JavaScript中日期的相关操作方法总结
2015/10/24 Javascript
HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
2015/11/25 Javascript
JavaScript中的this,call,apply使用及区别详解
2016/01/29 Javascript
JS使用正则表达式过滤多个词语并替换为相同长度星号的方法
2016/08/03 Javascript
轻松掌握JavaScript状态模式
2016/09/07 Javascript
Javascript highcharts 饼图显示数量和百分比实例代码
2016/12/06 Javascript
微信小程序  TLS 版本必须大于等于1.2问题解决
2017/02/22 Javascript
js实现一个猜数字游戏
2017/03/31 Javascript
vue2.0项目实现路由跳转的方法详解
2018/06/21 Javascript
微信小程序如何获取群聊的openGid以及名称详解
2019/07/17 Javascript
Node使用Selenium进行前端自动化操作的代码实现
2019/10/10 Javascript
vue.js this.$router.push获取不到params参数问题
2020/03/03 Javascript
Vue 简单实现前端权限控制的示例
2020/12/25 Vue.js
Linux-ubuntu16.04 Python3.5配置OpenCV3.2的方法
2018/04/02 Python
python3 打开外部程序及关闭的示例
2018/11/06 Python
python得到一个excel的全部sheet标签值方法
2018/12/10 Python
python调用百度API实现人脸识别
2020/11/17 Python
CSS3 渐变(Gradients)之CSS3 径向渐变
2016/07/08 HTML / CSS
HTML5自定义data-* data(obj)属性和jquery的data()方法的使用
2012/12/13 HTML / CSS
荷兰网上买鞋:MooieSchoenen.nl
2017/09/12 全球购物
优衣库美国官网:UNIQLO美国
2018/04/14 全球购物
Solid & Striped官网:美国泳装品牌
2019/06/19 全球购物
成功经营餐厅的创业计划书范文
2013/12/26 职场文书
婚礼主持结束词
2014/03/13 职场文书
学校查摆问题整改措施
2014/09/28 职场文书
免职通知
2015/04/23 职场文书
肖申克救赎观后感
2015/06/02 职场文书
《叶问2》观后感
2015/06/15 职场文书
2016年教师政治思想表现评语
2015/12/02 职场文书
浅谈Python数学建模之线性规划
2021/06/23 Python