vue 在使用v-html绑定的时候,里面的元素不会继承外部的css,解决方案
问题
想用vue绑定父文本生成的HTML内容,但是发现CSS样式根本不生效,选择器没起作用
代码:
<div class="announcedetailImg" v-html="detailList.content"></div>
设置样式:
<style lang="less" scoped>
.announcedetailImg{
width:100%;
}
.announcedetailImg img{
width:100% !important;
display:block;
}
.announcedetailImg p{
color:#333;
font-size:16px;
} </style>
这样之后,发现样式不起作用
解决方案:
scoped属性导致css仅对当前组件生效(用css3的属性选择器+生成的随机属性实现的),而html绑定渲染出的内容可以理解为是子组件的内容,子组件不会被加上对应的属性,所以不会应用css.
解决的话把scoped属性去掉就行了
vue 在使用v-html绑定的时候,里面的元素不会继承外部的css,解决方案的更多相关文章
- vue样式操作与事件绑定
Vue笔记 1 Vue实例 (VM) var vm = new Vue({ el:'#app', //挂载元素 //数据 data: { title:'值', ...
- Vue表单控件绑定
前面的话 本文将详细介绍Vue表单控件绑定 基础用法 可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.v-model本质上不过是语法糖,它负 ...
- 从Object.definedProperty中看vue的双向数据的绑定
前言 Object.defineProperty是ES5中的方法,它可以直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象.vue.js正式利用这种方法实现数据的双向绑定,以 ...
- vue 如何在循环中绑定v-model
vue 如何在循环中绑定v-model 我现在有这么一个需求,页面上有多项输入框,但是具体有多少项,我也不知道,它是通过"新增一项"按钮点击事件,点击一下,就新增一项:如下图这个样 ...
- Atitit vue.js 把ajax数据 绑定到form表单
Atitit vue.js 把ajax数据 绑定到form表单 1.1. 使用场景:主要应用在编辑与提交场合..1 1.2. 绑定数据到form控件,可以使用jquery,不过vue.js更加简单1 ...
- vue select下拉框绑定默认值
vue select下拉框绑定默认值: 首先option要加value值,以便v-model可以获取到对应选择的值 一.当没有绑定v-model,直接给对应的option加selected属性 二.当 ...
- vue中的数据双向绑定
学习的过程是漫长的,只有坚持不懈才能到达到自己的目标. 1.vue中数据的双向绑定采用的时候,数据劫持的模式.其实主要是用了Es5中的Object.defineProperty;来劫持每个属性的get ...
- vue 表单输入与绑定 v-model
vue使用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定.下面我们通过示例先了解下基本用法: &l ...
- vue中v-model 数据双向绑定
表单输入绑定 v-model 数据双向绑定,只能应用在input /textare /select <div id="app"> <input type=&quo ...
随机推荐
- webservice CXF 相关面试题
Web Service的优点(1) 可以让异构的程序相互访问(跨平台)(2) 松耦合(3) 基于标准协议(通用语言,允许其他程序访问) 1:WEB SERVICE名词解释.JSWDL开发包的介绍.JA ...
- c语言入门教程
https://www.youtube.com/playlist?list=PLY_qIufNHc293YnIjVeEwNDuqGo8y2Emx 感觉这个教程不错
- 932F Escape Through Leaf
传送门 题目大意 https://www.luogu.org/problemnew/show/CF932F 分析 我们可以从叶子向根每次插入b和ans 所以我们不难发现就是相当于插入线段 于是李超树+ ...
- 第一章Python简介
1.Python shell(Python命令解释器) 如下所示 2.Python的交互模式 如下 3.代码编辑器窗口 在上面的那些指令称为源代码. 4.在python中,缩进是有语法意义的. 在某行 ...
- html5操作类名API——classlist
tagNode.classList.add('123'); // 添加类 tagNode.classList.remove('bbb'); // 删除类 tagNode.classList.toggl ...
- Python开发 第一篇 python的前世今生
Python前世今生 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚本解释程序,作为ABC ...
- [GO]冒泡排序的原理和代码实现
冒泡排序的原理:对于一个数组里所有的元素进行两两比较,发生大于则变换数组下标则为升序排序,发生小于则变换数据下标的则为降序排序 比如给定的数组为[1, -2, 3, -4],对于我们的需求,两两比较后 ...
- MVC值提供组件ValueProvider的继承关系
MVC请求过程中中各组件调用顺序:值提供组件(IValueProvider)->模型绑定组件(IModelBinder)->模型验证组件 值提供组件接口 public interface ...
- Max Sum(动态规划)
原创 http://acm.hdu.edu.cn/showproblem.php?pid=1003 题目要求求出一个序列里面的最大序列和,序列要求是连续的,给出最大序列和,序列首元素下标和尾元素下标, ...
- html5 video使用autoplay属性时,声音混乱
html5 video使用autoplay属性时,声音混乱 页面代码 Index.html <html xmlns="http://www.w3.org/1999/xhtml" ...