问题

想用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,解决方案的更多相关文章

  1. vue样式操作与事件绑定

    Vue笔记 1 Vue实例 (VM) var vm = new Vue({    el:'#app', //挂载元素        //数据    data: {        title:'值', ...

  2. Vue表单控件绑定

    前面的话 本文将详细介绍Vue表单控件绑定 基础用法 可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.v-model本质上不过是语法糖,它负 ...

  3. 从Object.definedProperty中看vue的双向数据的绑定

    前言 Object.defineProperty是ES5中的方法,它可以直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象.vue.js正式利用这种方法实现数据的双向绑定,以 ...

  4. vue 如何在循环中绑定v-model

    vue 如何在循环中绑定v-model 我现在有这么一个需求,页面上有多项输入框,但是具体有多少项,我也不知道,它是通过"新增一项"按钮点击事件,点击一下,就新增一项:如下图这个样 ...

  5. Atitit vue.js 把ajax数据 绑定到form表单

    Atitit vue.js 把ajax数据 绑定到form表单 1.1. 使用场景:主要应用在编辑与提交场合..1 1.2. 绑定数据到form控件,可以使用jquery,不过vue.js更加简单1 ...

  6. vue select下拉框绑定默认值

    vue select下拉框绑定默认值: 首先option要加value值,以便v-model可以获取到对应选择的值 一.当没有绑定v-model,直接给对应的option加selected属性 二.当 ...

  7. vue中的数据双向绑定

    学习的过程是漫长的,只有坚持不懈才能到达到自己的目标. 1.vue中数据的双向绑定采用的时候,数据劫持的模式.其实主要是用了Es5中的Object.defineProperty;来劫持每个属性的get ...

  8. vue 表单输入与绑定 v-model

    vue使用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定.下面我们通过示例先了解下基本用法: &l ...

  9. vue中v-model 数据双向绑定

    表单输入绑定 v-model 数据双向绑定,只能应用在input /textare /select <div id="app"> <input type=&quo ...

随机推荐

  1. Bean管理注解的例子

  2. 在slam_gmapping中使用Log数据创建地图

    本文介绍使用机器人记录的tf变换和激光扫描数据来建立2D地图.并在ROS的图形化模拟环境rviz中通过重新回放记录的数据作为机器人真实传感器采集的输入,来观测地图动态创建过程. 1.ROS gmapp ...

  3. 黑盒测试实践--Day6 11.30

    黑盒测试实践--Day6 11.30 今天完成任务情况: 应用设计的场景用例,完成测试用例的编写 完成测试用例在自动化测试工具QTP上的测试 分析测试结果得到缺陷报告 小靳 软件测试 今天主要钻研了q ...

  4. (转)EASYUI+MVC4通用权限管理平台

    原文地址:http://www.cnblogs.com/hn731/archive/2013/07/15/3190947.html 通用权限案例平台在经过几年的实际项目使用,并取得了不错的用户好评.在 ...

  5. MATLAB读取写入文本数据最佳方法 | Best Method for Loading & Saving Text Data Using MATLAB

    MATLAB读取文件有很多方法.然而笔者在过去进行数据处理中,由于函数太多,相互混杂,与C#,Python等语言相比,反而认为读取文本数据比较麻烦.C#和Python等高级语言中,对于大部分的文本数据 ...

  6. scala冒泡排序

    scala冒泡排序: object Maopao { def main(args: Array[String]) { val list = List(1, 23, 432, 10, 23, 42, 3 ...

  7. (转)深入研究MiniMVC之后续篇

    今天在园子看到<深入研究 蒋金楠(Artech)老师的 MiniMvc(迷你 MVC),看看 MVC 内部到底是如何运行的>之后,本来是不打算开博来续这个后传,不过,在那边回了个评论之后, ...

  8. KVO 的代码简洁使用

    1.类属性设置与创建 详细使用介绍 KVO 键值观察 // KvoClass.h @interface KvoClass : NSObject @property(nonatomic, copy) N ...

  9. The method identifyUser(Arrays.asList("group001"), String, new HashMap<>()) is undefined for the type AipFace

    在使用百度云的人脸识别sdk时遇到了这个错误,网上百度不到解决的方法,当我浏览百度云的时候发现了这个 于是考虑到版本可能更新,出现了新的函数代替旧的函数,于是去查文档,文档链接如下 https://c ...

  10. C# 小球100米自由落下

    //一球从N 米高自由落下,每次落地后反跳回原高度的一般:再录下,求它在第十次落地时,共经过多少米?第10次反弹多高 static string ballDsitance(float height1, ...