详解三种方式解决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权威指南 学习笔记之变量作用域分享
Sep 28 Javascript
js中的json对象详细介绍
Oct 29 Javascript
JS仿Windows开机启动Loading进度条的方法
Feb 26 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(下)
Oct 28 Javascript
js检查是否关闭浏览器的方法
Aug 02 Javascript
利用n工具轻松管理Node.js的版本
Apr 21 Javascript
Angular 如何使用第三方库的方法
Apr 18 Javascript
js/jQuery实现全选效果
Jun 17 jQuery
使用typescript构建Vue应用的实现
Aug 26 Javascript
JS出现404错误原理及解决方案
Jul 01 Javascript
Vue自定义组件双向绑定实现原理及方法详解
Sep 03 Javascript
html中创建并调用vue组件的几种方法汇总
Nov 17 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
PHP实现的交通银行网银在线支付接口ECSHOP插件和使用例子
2014/05/10 PHP
php读取flash文件高宽帧数背景颜色的方法
2015/01/06 PHP
学习php设计模式 php实现建造者模式
2015/12/07 PHP
PHP设计模式之工厂模式(Factory Pattern)的讲解
2019/03/21 PHP
告诉大家什么是JSON
2008/06/10 Javascript
event.currentTarget与event.target的区别介绍
2012/12/31 Javascript
jquery子元素过滤选择器使用示例
2013/06/24 Javascript
jQuery中toggleClass()方法用法实例
2015/01/05 Javascript
js仿QQ中对联系人向左滑动、滑出删除按钮的操作
2016/04/07 Javascript
JS只能输入正整数的简单实例
2016/10/07 Javascript
scroll事件实现监控滚动条并分页显示(zepto.js)
2016/12/18 Javascript
基于javascript实现最简单选项卡切换
2017/02/01 Javascript
AngularJS实现动态添加Option的方法
2017/05/17 Javascript
backbone简介_动力节点Java学院整理
2017/07/14 Javascript
vue router 通过路由来实现切换头部标题功能
2019/04/24 Javascript
vue+elementui 对话框取消 表单验证重置示例
2019/10/29 Javascript
解决vue elementUI中table里数字、字母、中文混合排序问题
2020/01/07 Javascript
详解webpack的文件监听实现(热更新)
2020/09/11 Javascript
[04:49]期待西雅图之战 2016国际邀请赛中国区预选赛WINGS战队赛后采访
2016/06/29 DOTA
[01:16:13]DOTA2-DPC中国联赛 正赛 SAG vs Dragon BO3 第一场 2月22日
2021/03/11 DOTA
实例讲解python函数式编程
2014/06/09 Python
Python深入学习之内存管理
2014/08/31 Python
详解Python中内置的NotImplemented类型的用法
2015/03/31 Python
python操作sqlite的CRUD实例分析
2015/05/08 Python
Python类的用法实例浅析
2015/05/27 Python
Python基于PycURL自动处理cookie的方法
2015/07/25 Python
git进行版本控制心得详谈
2017/12/10 Python
python爬虫获取淘宝天猫商品详细参数
2020/06/23 Python
Django rest framework分页接口实现原理解析
2020/08/21 Python
CSS3 transforms应用于背景图像的解决方法
2019/04/16 HTML / CSS
GNC健安喜官方海外旗舰店:美国著名保健品牌
2017/01/04 全球购物
小学生竞选班长演讲稿
2014/04/24 职场文书
2015年毕业实习工作总结
2014/12/12 职场文书
岗位职责范本大全
2015/02/26 职场文书
工程合作意向书范本
2015/05/09 职场文书
微信早安问候语
2015/11/10 职场文书