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 相关文章推荐
js charAt的使用示例
Feb 18 Javascript
jQuery使用serialize()表单序列化时出现中文乱码问题的解决办法
Jul 27 Javascript
jQuery Validate插件实现表单验证
Aug 19 Javascript
微信小程序 生命周期函数详解
May 24 Javascript
vue.js  父向子组件传参的实例代码
Oct 29 Javascript
Vue 中对图片地址进行拼接的方法
Sep 03 Javascript
解决angularjs service中依赖注入$scope报错的问题
Oct 02 Javascript
微信小程序提交form操作示例
Dec 30 Javascript
vue路由守卫+登录态管理实例分析
May 21 Javascript
JavaScript Dom 绑定事件操作实例详解
Oct 02 Javascript
深入理解基于vue-cli的webpack打包优化实践及探索
Oct 14 Javascript
js校验开始时间和结束时间
May 26 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语法(4)
2006/10/09 PHP
php auth_http类库进行身份效验
2009/03/19 PHP
PHP验证码类代码( 最新修改,完全定制化! )
2010/12/02 PHP
深入mysql_fetch_row()与mysql_fetch_array()的区别详解
2013/06/05 PHP
PHP实现定时执行任务的方法
2014/10/05 PHP
php实现无限级分类
2014/12/24 PHP
PHP计算当前坐标3公里内4个角落的最大最小经纬度实例
2016/02/26 PHP
pjblog修改技巧汇总
2007/03/12 Javascript
javascript 建设银行登陆键盘
2008/06/10 Javascript
Jquery乱码的一次解决过程 图解教程
2010/02/20 Javascript
Jquery数独游戏解析(一)-页面布局
2010/11/05 Javascript
JQuery实现倒计时按钮的实现代码
2012/03/23 Javascript
javascript控制swfObject应用介绍
2012/11/29 Javascript
js获得网页背景色和字体色的方法
2014/03/21 Javascript
异步JS框架的作用以及实现方法
2015/10/29 Javascript
jQuery检测滚动条是否到达底部
2015/12/15 Javascript
jQuery实现链接的title快速出现的方法
2017/02/20 Javascript
基于jquery日历价格、库存等设置插件
2020/07/05 jQuery
vue 组件 全局注册和局部注册的实现
2018/02/28 Javascript
Vue iview-admin框架二级菜单改为三级菜单的方法
2018/07/03 Javascript
浅谈Fetch 数据交互方式
2018/12/20 Javascript
VUE 组件转换为微信小程序组件的方法
2019/11/06 Javascript
Django处理文件上传File Uploads的实例
2018/05/28 Python
网易2016研发工程师编程题 奖学金(python)
2019/06/19 Python
解决Django layui {{}}冲突的问题
2019/08/29 Python
在IE6系列等老式浏览器中使用HTML5的新标签实现方案
2012/12/25 HTML / CSS
Html5无刷新修改browser Url的方法
2014/01/15 HTML / CSS
Bailey帽子官方商店:Bailey Hats
2018/09/25 全球购物
黑猩猩商店:The Chimp Store
2020/02/12 全球购物
酒店门卫岗位职责
2013/12/29 职场文书
出国签证在职证明
2014/01/16 职场文书
教师个人自我评价范文
2014/04/13 职场文书
房务中心文员岗位职责
2014/04/16 职场文书
我爱我家教学反思
2014/05/01 职场文书
环保专项行动方案
2014/05/12 职场文书
《浅水洼里的小鱼》教学反思
2016/02/16 职场文书