vue 组件中添加样式不生效
如何产生
在开发项目中遇到在组件中添加样式不生效的情况。具体场景如下
//// 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 属性。
vue 组件中添加样式不生效的更多相关文章
- 第七十三篇:解决Vue组件中的样式冲突
好家伙, 1.组件之间的样式冲突 默认情况下,写在.vue组件中的样式会全局生效,因此很容易造成多个组件之间的样式冲突问题. 举个例子: 我们在Left.vue的组件中添加样式 <templat ...
- vue组件中的样式属性:scoped,解决在父组件中无法修改子组件样式问题
Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范. vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当前组件元素,它是通过使 ...
- vue组件中的样式属性--scoped
Scoped CSS Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范. vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当 ...
- 在vue组件的stylus样式总 取消search类型的input按钮中默认样式
在vue组件的stylus样式中 取消search类型的input按钮中默认样式 记录一个坑 环境 Vue组件 使用了Stylus的CSS风格. 问题 input输入框使用了 type="s ...
- vue 组件中数组的更新
今天写项目时遇到的问题,瞬间就卡在那了 来还原一下: parent.vue: <template> <div> <button @click="change&q ...
- 如何在VUE项目中添加ESLint
如何在VUE项目中添加ESLint 1. 首先在项目的根目录下 新建 .eslintrc.js文件,其配置规则可以如下:(自己小整理了一份),所有的代码如下: // https://eslint.or ...
- Vue组件中引入jQuery
一.安装jQuery依赖 在使用jQuery之前,我们首先要通过以下命令来安装jQuery依赖: npm install jquery --save # 如果你更换了淘宝镜像,可以使用cnpm来安装, ...
- element-ui 的el-button组件中添加自定义颜色和图标的实现方法
这篇文章主要介绍了element-ui 的el-button组件中添加自定义颜色和图标的实现方法,目前的解决方案是:添加一个自定义全局指令,同时在element-ui源码中,加入对应的组件.需要的朋友 ...
- vue组件中使用iframe元素
需要在本页面中展示vue组件中的超链接,地址栏不改变的方法: <template> <div class="accept-container"> <d ...
随机推荐
- [LC] 809. Expressive Words
Example: Input: S = "heeellooo" words = ["hello", "hi", "helo&quo ...
- 为什么java的接口的方法是public abstract修饰?为什么属性是public static final 修饰?
为什么java的接口的方法是public abstract修饰? 1.首先要明白接口的定义和作用是什么: 接口定义:接口是一个全部由抽象方法组成的集合,里面都是抽象方法和常量,用interface修 ...
- 管理Exchange Online用户介绍(一)
一.管理收件人 1.在“Office 365管理中心”主页,依次选择用户->添加用户 2.输入相关信息,其中包括名称.用户名.电子邮件地址等信息. 二.Exchange Online对用户邮箱的 ...
- Java && Python 算法面试常用类以及方法总结
数据结构 逻辑结构上: 包括集合,线性结构,非线性结构. 存储结构: 顺序存储,链式存储,索引存储,散列存储. Java 常见数据结构 大专栏 Java && Python 算法面试 ...
- ssh 怎样以root用户登录
#sudo vim /etc/ssh/sshd_config 找到并用#注释掉这行:PermitRootLogin prohibit-password 新建一行 添加:PermitRootLogin ...
- 学习python-20191203-Python Flask高级编程开发鱼书_第02章 Flask的基本原理与核心知识
视频01: 做一个产品时,一定要对自己的产品有一个明确的定位.并可以用一句话来概括自己产品的核心价值或功能. 鱼书网站几个功能 1.选择要赠送的书籍,向他人赠送书籍(价值功能,核心价值的主线): 2. ...
- window server 2012+apache+django
一.apache下载安装 https://www.apachelounge.com/download/VC10/ ***注意*** 本人用的是window server 2012 64位版本云服务器, ...
- 【转】mac os x配置adb命令的方法,苹果电脑设置adb命令的方法
http://www.myexception.cn/operating-system/1636963.html 步骤如下: 1. 启动终端Terminal (如果当前用户文件夹下已有.bash_pro ...
- mysql 优化2 慢查询
默认情况下mysql不记录慢查询日志,需要在启动的时候指定 bin\mysqld.exe - -slow-query-log 通过慢查询日志定位执行效率较低的SQL语句.慢查询日志记录了所有执行时间超 ...
- 自定义servlet重写doGet或doPost方法是如何实现多态的
我们知道,如果我们自定义一个servlet继承HttpServlet,并且重写HttpServlet中的doGet或doPost方法,那么从浏览器发送过来的request请求将调用HttpServle ...