详解三种方式解决vue中v-html元素中标签样式

Vue为v-html中标签添加CSS样式

<template>
 <div class="hello">
 <section>
  <h2 class="title">{{news.title}}</h2>
  <p class="news-time">{{news.datetime}}</p>
  <div class="con" v-html="news.dec">
  </div>
  <button class="back" @click="goBack()">返回列表</button>
 </section>
 </div>
</template>

当我们使用v-html渲染页面，使用下面这种方式去修改样式并没有效果，

<style scoped lang="less">
.con{
 p {
 font-size: 14px;
 line-height: 28px;
 text-align: left;
 color: rgb(238, 238, 238);
 color: #585858;
 text-indent: 2em;
 }
}
</style>

解决方案：

当我们引入第三方组件或加载html元素时，想修改下样式，就可以用以下三种方式：

一.去掉<style scoped>中的scoped

这个方法不建议使用，会改变布局

二.定义两个style标签，一个含有scoped属性，一个不含有scoped属性

使用方法为

<style scoped>
 .introduction{
 width: 100%;
 margin-bottom: 3rem;
 }
</style>

<style>
 .introduction img{
 width: 100%;
 object-fit: fill;
 }
</style>

三.通过 >>> 可以使得在使用scoped属性的情况下，穿透scoped，修改其他组件的值

使用模板为：

.introduction>>> img{
 width: 100%;
 object-fit: fill;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 在vue中利用v-html按分号将文本换行的例子

    最近在开发的时候遇到这样一个需求,需要将一段文本按照分号(有中文分号和英文分号)进行换行操作. 如下: 换行前:雷军,2457.66万,自然人股东;洪锋,169.51万,自然人股东;黎万强,10.33万,自然人股东; 换行后: 雷军,2457.66万,自然人股东; 洪锋,169.51万,自然人股东; 黎万强,10.33万,自然人股东; 显示的html: <p class="bgnr-txt" v-html="change(content)"> js: m

  • vue.js使用v-pre与v-html输出HTML操作示例

    vue.js使用v-pre与v-html输出HTML操作示例

    本文实例讲述了vue.js使用v-pre与v-html输出HTML操作.分享给大家供大家参考,具体如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-

  • vue中v-text / v-html使用实例代码详解

    废话少说,代码如下所述: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue实例中的数据,事件和方法</title> </head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"><

  • 详解三种方式解决vue中v-html元素中标签样式

    Vue为v-html中标签添加CSS样式 <template> <div class="hello"> <section> <h2 class="title">{{news.title}}</h2> <p class="news-time">{{news.datetime}}</p> <div class="con" v-html=&qu

  • 详解三种方式在React中解决绑定this的作用域问题并传参

    在React中时常会遇到this指向的作用域问题 从而导致undefined报错 先来个Demo: 功能很简单 点击按钮改变文字 import React from 'react'; export default class BindWithThis extends React.Component { constructor(props) { super(props); this.state = { msg:"BindWithThis" } } render() { return &l

  • 第七篇Bootstrap表单布局实例代码详解(三种表单布局)

    第七篇Bootstrap表单布局实例代码详解(三种表单布局)

    Bootstrap提供了三种表单布局:垂直表单,内联表单和水平表单.下面逐一给大家介绍,有兴趣的朋友一起学习吧. 创建垂直或基本表单: •·向父 <form> 元素添加 role="form". •·把标签和控件放在一个带有 class .form-group 的 <div> 中.这是获取最佳间距所必需的. •·向所有的文本元素 <input>.<textarea> 和 <select> 添加 class .form-cont

  • 详解五种方式让你在java中读取properties文件内容不再是难题

    详解五种方式让你在java中读取properties文件内容不再是难题

    一.背景 最近,在项目开发的过程中,遇到需要在properties文件中定义一些自定义的变量,以供java程序动态的读取,修改变量,不再需要修改代码的问题.就借此机会把Spring+SpringMVC+Mybatis整合开发的项目中通过java程序读取properties文件内容的方式进行了梳理和分析,先和大家共享. 二.项目环境介绍 Spring 4.2.6.RELEASE SpringMvc 4.2.6.RELEASE Mybatis 3.2.8 Maven 3.3.9 Jdk 1.7 Id

  • 详解三种java实现多线程的方式

    java中实现多线程的方法有两种:继承Thread类和实现runnable接口. 1.继承Thread类,重写父类run()方法 public class thread1 extends Thread { public void run() { for (int i = 0; i < 10000; i++) { System.out.println("我是线程"+this.getId()); } } public static void main(String[] args) {

  • javascript中类的定义方式详解(四种方式)

    本文实例讲述了javascript中类的定义方式.分享给大家供大家参考,具体如下: 类的定义包括四种方式: 1.工厂方式 function createCar(name,color,price){ var tempcar=new Object; tempcar.name=name; tempcar.color=color; tempcar.price=price; tempcar.getName=function(){ document.write(this.name+"-----"+

  • 详解三种C#实现数组反转方式

    今天上班中午吃饱之后.逛博客溜达看到一道题:数组反转  晚上回家洗完澡没事情做,就自己练习一把. public static class ArrayReserve { /// <summary> /// 使用 Array.Reverse(Arrar) 反转全部 /// </summary> /// <param name="arr"></param> public static void ReverseDemo1(int[] arr) {

  • vue中向data添加新属性的三种方式小结

    vue中向data添加新属性的三种方式小结

    目录 向data添加新属性的三种方式 原理分析 三种方式 vue组件 data等属性介绍 向data添加新属性的三种方式 原理分析 首先在了解这三种方式之前,我觉的有必要说一下,为啥不能直接手动给data中的对象添加属性呢? 下面咱们一块分析下: vue2 是通过数据劫持 “Object.defineProperty” 实现数据响应式:     const obj = {};         let val = 'kk'         Object.defineProperty(obj,'na

  • 详解el-table表头文字换行的三种方式

    详解el-table表头文字换行的三种方式

    目录 问题描述 效果图 三种方式的代码 总结 问题描述 表格中的表头一般都是不换行的,不过有时候在某些业务场景中,需要让表头的文字换行展示一下,我们先看一下效果图 效果图 三种方式的代码 看注释就行啦. 演示的话,直接复制粘贴运行就行啦 <template> <div class="vueWrap"> <el-table style="width: 900px" :data="tableBody" border :h

  • Java中获取时间戳的三种方式对比实现

    Java中获取时间戳 三种方式对比 最近项目开发过程中发现了项目中获取时间戳的业务.而获取时间戳有以下三种方式,首先先声明推荐使用System类来获取时间戳,下面一起看一看三种方式. 1.System.currentTimeMillis() System类中的currentTimeMillis()方法是三种方式中效率最好的,运行时间最短.开发中如果设计到效率问题,推荐使用此种方式获取. System.currentTimeMillis() 2.new Date().getTime() 除了Sys

随机推荐