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>

原文地址:https://www.cnblogs.com/yunspider/p/9623655.html

时间: 2024-10-13 16:33:08

Vue为v-html中标签添加CSS样式的相关文章

用Jquery动态append方式加入标签时Css样式丢失的解决方法

一般在Jquery中会用下面的方式来添加新标签: var obj = "<fieldset data-role='controlgroup' data-type='vertical' data-role='fieldcontain'> <input id='menu0" type='checkbox'/><label for='menu0'> 复选框 </label> </fieldset>";  //按个人要求拼接

我给女朋友讲编程CSS系列(1) –添加CSS样式的3种方式及样式表的优先权

如果说,原生态就是美,那么,我们就没有必要穿衣打扮. 网页是什么? 说白了,网页就是一堆[html标签]有序的搭配,让[CSS属性值]整整容,请[Javascript语言]处理一下事件. 一个人的整容效果,很大程度上取决于Ta本人,也就是原材料,对网页来说,原材料就是html标签,因此设计优秀的html标签结构十分重要. 整容医生的作用也至关重要,割双眼皮,整容医生的基本功,不同医生割出来的效果不同. 作为一个网页设计师,我们是不是应该追求完美,尽最大努力,让网页漂亮一些. 我知道,我们往往自称

HTML常用标签及CSS样式选择器

HTML常用标签及CSS样式选择器 html部分 <!DOCTYPE html> <html> <head> <!--头标记 写描述性的信息(css\javaScript)--> <!--引入外部的样式文件 rel:relationship的英文缩写·REL属性用于定义链接的文件和HTML文档之间的关系 --> <link rel="stylesheet" type="text/css" href=&

动态为页面添加CSS样式文件引用

动态为页面添加CSS样式文件引用: 1 if (document.createStyleSheet) { //IE 2 document.createStyleSheet("./Themes/Default/MessageTip.css"); 3 } 4 else { //Firefox, Chrome 5 var stylesheet = document.createElement("link"); 6 stylesheet.href = "./The

关于html5中progress标签的CSS样式总结

HTML5中新增了progress标签,用来表示进度条. <progress value="100" max="100" class="hot"> 显示效果如下: 其中CSS样式代码如下: progress { width: 168px; height: 5px; } progress::-webkit-progress-bar { background-color:#d7d7d7; } progress::-webkit-progr

使用JavaScript动态添加CSS样式规则

原文链接: Add Rules to Stylesheets with JavaScript原文日期: 2014-09-04翻译日期: 2014-09-05翻译人员: 铁锚 现在Web应用中有大量的JavaScript代码,而我们也一直在追寻各种使他们更快的解决方案. 我们通过 事件代理(event delegation) 让事件监听更高效, 我们利用 函数降频技术(function debouncing) 来限制一段时间内给定方法被调用的次数,请参考: 如何防止事件函数的高频触发(中文翻译)

html添加css——样式选择器

如何给html添加样式.两种方法: 一.新建立一个css样式表,与原html同目录,然后通过link标签链接.如:<link type="text/css" rel="stylesheet" href="lounge.css">(link标签是一个void元素,无结束标签.) 二.直接在html源码中使用style标签.如:<style>样式</style>,style标签嵌入head中. html中插入sty

javascript动态添加css样式

查看demo:http://koringz.github.io/addcssstyle/ css的cssstylesheet方法有哪些属性和方法,首先我们是console.log(style.sheet). 当我们知道了style具有这些方法的时候,我们可以用一个函数输出一次获得的css属性方法. function addCss () { var sty = document.createElement('style'); var h2 = document.getElementsByTagNa

2015-09-17 第二节课 滚动标签、form标签和CSS样式

一.滚动字幕标签的用法:<marquee></marquee> [举例如下]: <marquee direction="left">想左边跑动!</marquee> <marquee heiht="200" direction="up" hspace="200">向上滚动!</marquee> <marquee scrollamount="