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幻灯片可循环播放可平滑旋转带滚动导航(自写)
Aug 05 Javascript
jQuery层级选择器用法分析
Feb 10 Javascript
IE浏览器下PNG相关功能
Jul 05 Javascript
.NET微信公众号开发之创建自定义菜单
Jul 16 Javascript
jquery插件之文字间歇自动向上滚动效果代码
Feb 25 Javascript
温习Javascript基础语法之词法结构
May 31 Javascript
tablesorter.js表格排序使用方法(支持中文排序)
Feb 10 Javascript
JS实现的简单表单验证功能示例
Oct 13 Javascript
vue-router实现tab标签页(单页面)详解
Oct 17 Javascript
简单了解JavaScript异步
May 23 Javascript
基于ssm框架实现layui分页效果
Jul 27 Javascript
详解Vue的异步更新实现原理
Dec 22 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
经典的PHPer为什么被认为是草根?
2007/04/02 PHP
PHP编程中字符串处理的5个技巧小结
2007/11/13 PHP
php中常用的预定义变量小结
2012/05/09 PHP
计算php页面运行时间的函数介绍
2013/07/01 PHP
php多文件上传下载示例分享
2014/02/20 PHP
lnmp安装多版本PHP共存的方法详解
2018/08/02 PHP
载入进度条 效果
2006/07/08 Javascript
js AppendChild与insertBefore用法详细对比
2013/12/16 Javascript
javascript实现des解密加密全过程
2014/04/03 Javascript
js 通过cookie实现刷新不变化树形菜单
2014/10/30 Javascript
轻松创建nodejs服务器(2):nodejs服务器的构成分析
2014/12/18 NodeJs
jquery实现勾选复选框触发事件给input赋值
2015/02/01 Javascript
微信小程序分页加载的实例代码
2017/07/11 Javascript
JavaScript适配器模式详解
2017/10/19 Javascript
Vue cli+mui 区域滚动的实例代码
2018/01/25 Javascript
JavaScript中使用import 和require打包后实现原理分析
2018/03/07 Javascript
vue组件tabbar使用方法详解
2018/11/06 Javascript
js+canvas实现两张图片合并成一张图片的方法
2019/11/01 Javascript
微信小程序登陆注册功能的实现代码
2019/12/10 Javascript
[36:45]TNC vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
解决Django模板无法使用perms变量问题的方法
2017/09/10 Python
python实现二分查找算法
2017/09/21 Python
Python 逐行分割大txt文件的方法
2017/10/10 Python
python3+PyQt5实现支持多线程的页面索引器应用程序
2018/04/20 Python
Django中在xadmin中集成DjangoUeditor过程详解
2019/07/24 Python
详解Python并发编程之创建多线程的几种方法
2019/08/23 Python
python+Django实现防止SQL注入的办法
2019/10/31 Python
python正则过滤字母、中文、数字及特殊字符方法详解
2020/02/11 Python
Python利用PyPDF2库获取PDF文件总页码实例
2020/04/03 Python
html5基础标签(html5视频标签 html5新标签用法)
2013/12/30 HTML / CSS
HTML5公共页面提取作为公用代码的方法
2020/06/30 HTML / CSS
YOOX美国官方网站:全球著名的多品牌时尚网络概念店
2016/09/11 全球购物
校园活动策划书范文
2014/01/10 职场文书
委托证明模板
2014/09/16 职场文书
python四种出行路线规划的实现
2021/06/23 Python
【2·13】一图读懂中国无线电发展
2022/02/18 无线电