Vue为v-html中标签添加CSS样式
在最近的vue项目中遇到的问题:v-html渲染的富文本,无法在样式表中修改样式;
<template>
<div class="msgHtmlBox" v-html='msgHtml'></div>
</template> <script>
export default{
data(){
return {
msgHtml: "<p>https://www.cnblogs.com/yunspider/</p>"
}
}
}
</script> <style scoped>
.msgHtmlBox p{
color: blue;
}
</style>
这是为什么呢?原因很简单:如果p标签在template中先写出来,那么在<style></style>标签中是可以修改其样式的;
这应该是vue编译的规范,未在虚拟dom中渲染的元素无法修改样式;
解决方案1:在updated生命周期函数中,js动态配置样式,代码如下
updated() {
$('.msgHtmlBox').find('p').css('color', 'blue');
},
解决方案2:去掉style标签中的scoped属性
scoped属性导致css仅对当前组件生效(用css3的属性选择器+生成的随机属性实现的),而html绑定渲染出的内容可以理解为是子组件的内容,子组件不会被加上对应的属性,所以不会应用css.
解决方案3:写样式的时候添加>>>
<style scoped>
.msgHtmlBox >>> p{
color: blue;
}
</style>
Vue为v-html中标签添加CSS样式的更多相关文章
- Vuejs使用scoped(私有) style为v-html中标签添加CSS样式
最近使用Vue框架的时候遇到一个问题,就是后台把数据写好了,而且写好的数据的某些内容是html格式的,使用Vue框架的v-html虽然可以很简单的就把数据转换成html的标签渲染在页面上,但是有些样式 ...
- 后端数据中含有html标签和css样式,前端如何转译展示样式效果。
后端含有html标签和css样式的数据: domain="<span style='color:red'>www.baidu.com</span>" (vu ...
- 我给女朋友讲编程CSS系列(1) –添加CSS样式的3种方式及样式表的优先权
如果说,原生态就是美,那么,我们就没有必要穿衣打扮. 网页是什么? 说白了,网页就是一堆[html标签]有序的搭配,让[CSS属性值]整整容,请[Javascript语言]处理一下事件. 一个人的整容 ...
- 044. asp.net主题之二为主题添加CSS样式和动态加载主题
1. 新建任意一个网站, 默认主页为Default.aspx, 增加一个App_Themes目录, 用于存储主题, 添加一个MyTheme的主题, 在MyTheme主题下添加一个样式表文件, 默认名称 ...
- Bootstrap入门(三)<p>标签的css样式
Bootstrap入门(三)<p>标签的css样式 前提:引入css文件,内容放在一个class为container的div中 <p>标签属性 1.“ text-left ...
- 怎么给当前点击的a标签添加一个样式(跳转页面后)
怎么给当前点击的a标签添加一个样式(跳转页面后): 方法1. 用cookie记录这个打开的序列号,然后页面在跳转的时候在读出来.方法2. 循环a的链接,然后与location.href去比对,如果相同 ...
- PHP使用echo输出标签设置CSS样式问题
使用php是可以输出HTML标签的,这为页面设计带来很大方便. 在此记录php输出标签设置CSS样式的问题: echo可使用''.""或你不用引号,如果想要输出带CSS样式的HTM ...
- 动态为页面添加CSS样式文件引用
动态为页面添加CSS样式文件引用: if (document.createStyleSheet) { //IE document.createStyleSheet("./Themes/Def ...
- 免插件为WordPress文章中标签添加内链
给文章标签添加内链,意思就是说,如果你文章中出现了和标签一样的文字,那么这个文字就会自动成为标签链接,你点击这个链接就会查看到所有含有该标签的文章,这个能方便用户浏览,据说还利于SEO.下面说说方法: ...
随机推荐
- C语言 深入学习
浮点数: x = Mx*2^Ex为一个规格化浮点数,Mx为x的尾数,Ex为x的阶码. 1e-6:表示1 * 10 ^ (-6). 编译时执行: sizeof是运算符(而非函数),在编译时执行,不会导致 ...
- springboot整合thymeleaf+tiles示例
网上关于此框架的配置实在不多,因此想记录下来以防忘记 因为公司框架基于上述(公司采用gradle构建项目,楼主采用的是maven),所以楼主能少走些弯路: 1.创建springboot-maven项目 ...
- JS定时器时间日期钟表
window.onload=function(){ setTime(); setInterval('setTime()',1000); } function checkTime(n){ if(n< ...
- pc网页中嵌入百度地图
pc网页中嵌入百度地图 1 打开百度地图生成器: http://api.map.baidu.com/lbsapi/creatmap/ 2 设置好了之后,点击获取代码,将代码粘贴到文件中保存为html文 ...
- Java问题解决:Java compiler level does not match the version of the installed Java project facet.
问题原因:Java编译器级别与Facted Project 中的Java 版本设定不匹配. 解决办法:将两者设置一致 1.查看Java compiler level : 选中项目右键propertie ...
- springboot学习之授权Spring Security
SpringSecurity核心功能:认证.授权.攻击防护(防止伪造身份) 涉及的依赖如下: <dependency> <groupId>org.springframework ...
- openModelica调试
1打印信息 Modelica.Utilities.Streams.print(“messge”);
- Lambda语法篇
函数式接口 函数式接口(functional interface 也叫功能性接口,其实是同一个东西).简单来说,函数式接口是只包含一个方法的接口. Lambda语法 包含三个部分 一个括号内用逗号分隔 ...
- php如何控制客户端生成缓存
php如何控制客户端生成缓存 一.总结 一句话总结:用http消息响应头中的Cache-Control来控制客户端缓存,说的是页面本身被客户端缓存,而不是重新生成的其它的非页面缓存 响应头Cache- ...
- ggplot2画图
早在N年前就听说这个包画图不错,一直没机会用,终于等到了.相比前面trendline这个包的可视化功能强大得多. ggplot2需要使用dataframe,其实就是一个N维数组, install.pa ...