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 相关文章推荐
GreyBox技术总结(转)
Nov 23 Javascript
JQUERY实现左侧TIPS滑进滑出效果示例
Jun 27 Javascript
jQuery获取节点和子节点文本的方法
Jul 22 Javascript
JavaScript数组前面插入元素的方法
Apr 06 Javascript
AngularJs解决跨域问题案例详解(简单方法)
May 19 Javascript
JavaScript+HTML5实现的日期比较功能示例
Jul 12 Javascript
vue中的ref和$refs的使用
Nov 22 Javascript
node错误处理与日志记录的实现
Dec 24 Javascript
微信小程序结合mock.js实现后台模拟及调试
Mar 28 Javascript
vue在路由中验证token是否存在的简单实现
Nov 11 Javascript
Javascript节流函数throttle和防抖函数debounce
Dec 03 Javascript
Vue看了就会的8个小技巧
Jan 21 Vue.js
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程序61条面向对象分析设计的经验小结
2008/11/12 PHP
PHP MySQL应用中使用XOR运算加密算法分享
2011/08/28 PHP
ThinkPHP3.1新特性之Action参数绑定
2014/06/19 PHP
Laravel 5框架学习之数据库迁移(Migrations)
2015/04/08 PHP
PHP发送AT指令实例代码
2016/05/26 PHP
PHP入门教程之数学运算技巧总结
2016/09/11 PHP
javascript的函数
2007/01/31 Javascript
js文字滚动停顿效果代码
2008/06/28 Javascript
鼠标经过的文本框textbox变色
2009/05/21 Javascript
JQuery 学习笔记01 JQuery初接触
2010/05/06 Javascript
精通Javascript系列之数值计算
2011/06/07 Javascript
jquery实现奇偶行赋值不同css值
2012/02/17 Javascript
jQuery实现tag便签去重效果的方法
2015/01/20 Javascript
谈谈基于iframe、FormData、FileReader三种无刷新上传文件的方法
2015/12/03 Javascript
深入理解关于javascript中apply()和call()方法的区别
2016/04/12 Javascript
浅析Node.js非对称加密方法
2018/01/29 Javascript
Intellij IDEA搭建vue-cli项目的方法步骤
2018/10/20 Javascript
学习使用ExpressJS 4.0中的新Router的用法
2018/11/06 Javascript
Vue使用watch监听一个对象中的属性的实现方法
2019/05/10 Javascript
解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)
2020/07/20 Javascript
python实现用户登陆邮件通知的方法
2015/07/09 Python
python3利用tcp实现文件夹远程传输
2018/07/28 Python
Python使用matplotlib绘制随机漫步图
2018/08/27 Python
python版本五子棋的实现代码
2018/12/11 Python
python实现抽奖小程序
2020/04/15 Python
python内打印变量之%和f的实例
2020/02/19 Python
Pandas替换及部分替换(replace)实现流程详解
2020/10/12 Python
详解BeautifulSoup获取特定标签下内容的方法
2020/12/07 Python
美国50岁以上单身人士约会平台:SilverSingles
2018/06/29 全球购物
介绍一下HTTP、HTTPS和SSL
2012/12/16 面试题
年度考核自我鉴定
2013/11/09 职场文书
暑期社会实践学生的自我评价
2014/01/09 职场文书
大学生家政服务项目创业计划书
2014/01/30 职场文书
企业员工爱岗敬业演讲稿
2014/08/26 职场文书
工程质检员岗位职责
2015/04/08 职场文书
对Golang中的FORM相关字段理解
2021/05/02 Golang