问题

想用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. 20169219 SEED SQL注入实验

    实验环境SEED Ubuntu镜像 环境配置 实验需要三样东西,Firefox.apache.phpBB2(镜像中已有): 1.运行Apache Server:只需运行命令sudo service a ...

  2. 如何恢复VS2013代码实时校验功能

      VS2013在某一天突然无法进行实时代码校验了,只有在编译的时候,错误列表才显示语法错误 怎么来解决这个问题呢?试试环境重置吧. 首先:打开工具菜单,选择“导入和导出设置”. 其次:可以先导出选定 ...

  3. vba实现excel多表合并

    Excel多表合并之vba实现 需求 保留列名,复制每一个excel里的数据,合并到一个excel 操作步骤 将要合并的文件放在同一文件夹下,复制过来就好(ps:最好不要直接操作原数据文件,避免操作失 ...

  4. React+gulp+browserify模块化开发

    阅读本文需要有React的基础知识,可以在React 入门实例教程和React中文官网进行基础学习. 没有React基础也可以学习本文,本文主要不是学习React,而是gulp+browserify进 ...

  5. LSI SAS3IRCU配置SAS3系列RAID卡

    LSI SAS3IRCU配置SAS3系列RAID卡 一.适用的controller LSISAS3008 LSISAS3004 二.名词解释 Controller: IR: Volume: 卷,基于物 ...

  6. WPF中在摄像头视频上叠加控件的解决方案

    一.视频呈现 前段时间,在一个wpf的项目中需要实时显示ip摄像头,对此的解决方案想必大家都应该知道很多.在winform中,我们可以将一个控件(一般用panel或者pictruebox)的句柄丢给摄 ...

  7. angular启动过程

    第一步: .angular-cli.json 第二步: 第三步: 第四步: 第五步:

  8. C# 由范式编程==运算符引发对string内存分配的思考

    今天在看C#编程指南时(类型参数的约束http://msdn.microsoft.com/zh-cn/library/d5x73970.aspx)看到一段描述: 在应用 where T : class ...

  9. 自定义Cell的流程

    1..h文件 // // 文 件 名:CHBackupGateWayCell.h // // 版权所有:Copyright © 2018 lelight. All rights reserved. / ...

  10. Thread Group(线程组)

    线程组,可以理解用户池,用来产生线程(用户),每一个线程代表一个用户,在使用JMeter进行性能测试过程中,经常需要模拟多个用户进行测试,可以通过设置线程数代表多少个用户,通常一个线程组就代表一个测试 ...