问题

想用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. c# 获取客户端ip、mac、机器名、操作系统、浏览器信息

    d using System; using System.Collections.Generic; using System.Linq; using System.Web; using System. ...

  2. poj1722 SUBTRACT

    应该是基础的dp练手题 线性dp最主要的就是关于阶段的划分,这个题中我没想到的一点就是开状态的时候使用了前i个数能合成的数来记录 我自己的想法就是类似于区间dp这样的记录方法,这种方法确实开了很多冗余 ...

  3. 设计模式06: Adapter 适配器模式(结构型模式)

    Adapter 适配器模式(结构型模式) 适配(转换)的概念无处不在:电源转接头.电源适配器.水管转接头... 动机(Motivation)在软件系统中,由于应用环境的变化,常常需要将“一些现存的对象 ...

  4. HackThirteen 在onCreate()方法中获取View的宽度和高度

    1.概要:     Android源代码中很多模块都使用了post()方法,深入理解框架曾运行机制对于避开类似于本例中的小陷阱是很重要的 2.问题提出:     如果开发一些依赖于UI控件的宽和高的功 ...

  5. Android日期时间选择器DatePicker、TimePicker日期时间改变事件响应(Android学习笔记)

    activity_main.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android&qu ...

  6. 采样器----Debug Sampler

    Debug Sampler可以产生所有JMeter变量和属性的样本,可以在View Tree Result的响应中查看变量的值,此取样器在调试脚本阶段可以很方便的看到变量的值,在正式运行脚本的过程中应 ...

  7. 一大波趣图:CSS的力量

    CSS的力量         CSS的作用,一目了然~     见识一下CSS的厉害!   用了CSS,效果显著   HTML5 + CSS3 + Javascript会怎么样?       HTML ...

  8. 中国移动MIFI--CM510,4G TD-LTE MIFI 上网终端开箱及初步体验@上海

    上海的,前期在4G官网报名专页登记了http://www.10086.cn/lte/recruit.html 当时由于报名结束了,所以先注册登记了信息. 1.15号中午收到10086的短信邀请,立马报 ...

  9. Web渗透测试(xss漏洞)

    Xss介绍—— XSS (cross-site script) 跨站脚本自1996年诞生以来,一直被OWASP(open web application security project) 评为十大安 ...

  10. [agc008f] Black Radius 树形dp

    Description ​ 给你一棵有NN个节点的树,节点编号为11到NN,所有边的长度都为11 ​ "全"对某些节点情有独钟,这些他喜欢的节点的信息会以一个长度为NN的字符串ss ...