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


Posted in Javascript onNovember 22, 2018

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;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript Cookie的读取和写入函数
Dec 08 Javascript
IE6-IE9不支持table.innerHTML的解决方法分享
Sep 14 Javascript
屏蔽相应键盘按钮操作
Mar 10 Javascript
jquery实现红色竖向多级向右展开的导航菜单效果
Aug 31 Javascript
jQuery头像裁剪工具jcrop用法实例(附演示与demo源码下载)
Jan 22 Javascript
正则验证小数点后面只能有两位数的方法
Feb 28 Javascript
浅谈ajax请求不同页面的微信JSSDK问题
Feb 26 Javascript
vue安装遇到的5个报错及解决方法
Jun 12 Javascript
mock.js模拟前后台交互
Jul 25 Javascript
vue视频播放暂停代码
Nov 08 Javascript
jQuery与原生JavaScript选择HTML元素集合用法对比分析
Nov 26 jQuery
解决await在forEach中不起作用的问题
Feb 25 Javascript
详解Vue组件之作用域插槽
Nov 22 #Javascript
详解vue中localStorage的使用方法
Nov 22 #Javascript
微信小程序功能之全屏滚动效果的实现代码
Nov 22 #Javascript
layer弹出子iframe层父子页面传值的实现方法
Nov 22 #Javascript
js操作table中tr的顺序实现上移下移一行的效果
Nov 22 #Javascript
从源码里了解vue中的nextTick的使用
Nov 22 #Javascript
Vue动态加载异步组件的方法
Nov 21 #Javascript
You might like
实现“上一页”和“下一页按钮
2006/10/09 PHP
PHP 将逗号、空格、回车分隔的字符串转换为数组的函数
2012/06/07 PHP
深入php define()函数以及defined()函数的用法详解
2013/06/05 PHP
ThinkPHP之foreach标签使用概述
2014/06/30 PHP
PHP轻量级数据库操作类Medoo增加、删除、修改、查询例子
2014/07/04 PHP
php源码之将图片转化为data/base64数据流实例详解
2016/11/27 PHP
PHP简单读取xml文件的方法示例
2017/04/20 PHP
jquery多选项卡效果实例代码(附效果图)
2013/03/23 Javascript
jquery的map与get方法详解
2013/11/04 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖动基本操作
2015/11/30 Javascript
javascript cookie的简单应用
2016/02/24 Javascript
原生js图片轮播效果实现代码
2016/10/19 Javascript
Centos7 中安装 Node.js v4.4.4
2016/11/03 Javascript
使用jquery的jsonp如何发起跨域请求及其原理详解
2017/08/17 jQuery
提升页面加载速度的插件InstantClick
2017/09/12 Javascript
使用原生js封装的ajax实例(兼容jsonp)
2017/10/12 Javascript
微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】
2020/05/29 Javascript
vue实现前端列表多条件筛选
2020/10/26 Javascript
antd 表格列宽自适应方法以及错误处理操作
2020/10/27 Javascript
[57:37]EG vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
深入解析Python中的list列表及其切片和迭代操作
2016/03/13 Python
selenium+python自动化测试之页面元素定位
2019/01/23 Python
在python中利用opencv简单做图片比对的方法
2019/01/24 Python
Python日志无延迟实时写入的示例
2019/07/11 Python
Python3 实现减少可调用对象的参数个数
2019/12/20 Python
如何用css3实现switch组件开关的方法
2018/02/09 HTML / CSS
CSS 3.0 结合video视频实现的创意开幕效果
2020/06/01 HTML / CSS
普通院校学生的自荐信
2013/11/27 职场文书
幼儿教师师德师风演讲稿
2014/08/22 职场文书
2014应届本科生自我评价
2014/09/13 职场文书
评职称个人总结
2015/03/05 职场文书
学习《中小学教师职业道德规范》心得体会
2016/01/18 职场文书
python3 删除所有自定义变量的操作
2021/04/08 Python
Python基础知识之变量的详解
2021/04/14 Python
MYSQL数据库使用UTF-8中文编码乱码的解决办法
2021/05/26 MySQL
MyBatis 动态SQL全面详解
2021/10/05 MySQL