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 SpiderMonkey中的函数序列化如何进行
Dec 05 Javascript
JS中引用百度地图并将百度地图的logo和信息去掉
Sep 29 Javascript
jQuery实现自动滚动到页面顶端的方法
May 22 Javascript
jquery实现点击页面回到顶部
Nov 23 Javascript
JS中Array数组学习总结
Jan 18 Javascript
使用Vue组件实现一个简单弹窗效果
Apr 23 Javascript
Vue一次性简洁明了引入所有公共组件的方法
Nov 28 Javascript
js的继承方法小结(prototype、call、apply)(推荐)
Apr 17 Javascript
详解VSCode配置启动Vue项目
May 14 Javascript
原生js实现3D轮播图
Mar 21 Javascript
vue-devtools的安装和使用步骤详解
Oct 17 Javascript
Vue 电商后台管理项目阶段性总结(推荐)
Aug 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
php 空格,换行,跳格使用说明
2009/12/18 PHP
PHP is_array() 检测变量是否是数组的实现方法
2016/06/13 PHP
在PHP语言中使用JSON和将json还原成数组的方法
2016/07/19 PHP
php mysql_real_escape_string addslashes及mysql绑定参数防SQL注入攻击
2016/12/23 PHP
PHP多线程模拟实现秒杀抢单
2018/02/07 PHP
php插入mysql数据返回id的方法
2018/05/31 PHP
js小技巧--自动隐藏红叉叉
2007/08/13 Javascript
JS页面延迟执行一些方法(整理)
2013/11/11 Javascript
javascript阻止浏览器后退事件防止误操作清空表单
2013/11/22 Javascript
escape函数解决js中ajax传递中文出现乱码问题
2014/10/30 Javascript
nodejs实现的一个简单聊天室功能分享
2014/12/06 NodeJs
JavaScript弹出对话框的三种方式
2016/03/23 Javascript
使用JavaScript解决网页图片拉伸问题(推荐)
2016/11/25 Javascript
文件上传的几个示例分享【推荐】
2016/12/16 Javascript
jquery实现异步加载图片(懒加载图片一种方式)
2017/04/24 jQuery
jQuery实现web页面樱花坠落的特效
2017/06/01 jQuery
Javascript实现的StopWatch功能示例
2017/06/13 Javascript
JavaScript设计模式之单例模式简单实例教程
2018/07/02 Javascript
Vue隐藏显示、只读实例代码
2018/07/18 Javascript
利用JavaScript缓存远程窃取Wi-Fi密码的思路详解
2018/11/05 Javascript
vue路由跳转传参数的方法
2019/05/06 Javascript
Layer+Echarts构建弹出层折线图的方法
2019/09/25 Javascript
vue 在服务器端直接修改请求的接口地址
2020/12/19 Vue.js
[02:08]DOTA2英雄基础教程 马格纳斯
2014/01/17 DOTA
[36:33]完美世界DOTA2联赛循环赛 Matador vs Forest 第一场 11.06
2020/11/06 DOTA
PyTorch上实现卷积神经网络CNN的方法
2018/04/28 Python
python实现感知器算法(批处理)
2019/01/18 Python
Python3多线程版TCP端口扫描器
2019/08/31 Python
HTML5探秘:用requestAnimationFrame优化Web动画
2018/06/03 HTML / CSS
GUESS盖尔斯法国官网:美国时尚品牌
2016/09/23 全球购物
澳大利亚工具仓库:Tools Warehouse
2018/10/15 全球购物
平面网站制作专科生的自我评价分享
2013/12/11 职场文书
电子商务应届生自我鉴定
2014/01/13 职场文书
幼儿园三八妇女节活动方案
2014/03/11 职场文书
民事上诉状范文
2015/05/22 职场文书
深入理解mysql事务隔离级别和存储引擎
2022/04/12 MySQL