问题

想用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. 丢弃昂贵的Detours Professional 3.0,使用免费强大的EasyHook

    我们要先看看微软官方的著名HOOK库: Detours Professional 3.0 售价:US$9,999.95 功能列表: Detours 3.0 includes the following ...

  2. Linux 查看是64位还是32位

    [root@VM_7_88_centos ~]# uname -a Linux VM_7_88_centos 3.10.0-229.el7.x86_64 #1 SMP Fri Mar 6 11:36: ...

  3. 编写高质量代码改善C#程序的157个建议——建议41:实现标准的事件模型

    建议41:实现标准的事件模型 上一建议中,我们实现了一个带事件通知的文件传输类FileUploader.虽然已经满足需求,但却不符合C#的编码规范,查看EventHandler的原型声明: publi ...

  4. 简单接触oracle数据库nvl函数decode函数

    SQL语句的DECODE()和NVL()函数用法 SELECT DECODE(choose_tool,0,'宝马',1,'电动车',2,'自行车','步行')  AS my_tool FROM dat ...

  5. Robot Framework 使用总结

    最近项目上使用了RF快速实现了一些验收测试的自动化case,感觉不错,很好用,下面就记录一下使用RF实现自动化的过程. 什么是RF? RF是一种测试框架,帮助测试人员在其框架下快速实现验收测试的自动化 ...

  6. python的requests库怎么发送带cookies的请求

     背景: 在用robot做接口自动化时,有一个查询接口需要用到登录后返回的token等信息作为cookies作为参数一起请求(token是在返回体中,并不在cookies中), 刚好create se ...

  7. 【转载】C# DataGridView 通过代码设置样式

    // 表格上下左右自适应 dataGridView.Anchor = (AnchorStyles.Top | AnchorStyles.Right | AnchorStyles.Bottom | An ...

  8. 灯塔AOI简易实现

    首先我们来讨论下游戏开发中的几个坐标系,为了方便解释,我截取了灯塔AOI DEMO当NPC数目为0时候的样子(代码地址觉得有帮助的童鞋记得给我代码点个星^_^) 先对这张图简单说明下: 蓝色的坐标轴表 ...

  9. 一个div添加多个背景图片

    效果图如下:

  10. linux centos 宝塔主机控制面板安装和安全狗安装过程记录

    linux 宝塔控制面板 安装过程yum install -y wget && wget -O install.sh http://103.224.251.79:5880/instal ...