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 ...
随机推荐
- JMS-消息中间件的应用02-安装ActiveMQ-来自慕课学习-新手学习
What is ActiveMQ? -----突然好想打英文,好奇怪 请看来自官网的介绍: Apache ActiveMQ ™ is the most popular and powerf ...
- ubuntu 14.04编译安装xen4.4总结
1. 安装环境 操作系统:ubuntu14.04 xen版本:xen4.4 2. 依赖包的安装 在安装xen之前先进行依赖包的安装,在不停得尝试之后,总结出以下需要安装的依赖包. sudo apt-g ...
- Java 错误结果Throw/Throws
目录 java处理异常方式 throw的作用 throws的作用 方法原理 举例 总结 个人实例 1.java处理异常方式 在java代码中如果发生异常的话,jvm会抛出 ...
- 如何解决某个jar包的依赖冲突问题
我用的是idea集成开发环境,因此以该开发工具讲解. 首先在在Terminal窗口中,键入:mvn dependency:tree -Dincludes=com.google.guava 如果不加-D ...
- 编写高质量代码改善C#程序的157个建议——建议38:小心闭包中的陷阱
建议38:小心闭包中的陷阱 先看一下下面的代码,设想一下输出的是什么? static void Main(string[] args) { List<Action> lists = new ...
- POJ - 2965 The Pilots Brothers' refrigerator(压位+bfs)
The game “The Pilots Brothers: following the stripy elephant” has a quest where a player needs to op ...
- How do I create a .pyc file?
Python automatically compiles your script to compiled code, so called byte code, before running it. ...
- Oracle 定时任务讲解
前几天,公司的job调度出现了问题,由于权限管的严,没有查看oracle 一些重要的数据字典,后面联系DBA,是由于数据库切换到备机时,参数设置不对,导致db job没有正常调度. 今天刚好有时间,想 ...
- 【转】android中layout_weight的理解
android Layout_weight的理解 SDK中的解释: Indicates how much of the extra space in the LinearLayout will be ...
- CSR(certSigningRequest文件)导出步骤
1.打开钥匙串访问 2.请求证书 3.电子邮箱.保存位置 电子邮箱其实是可以乱填的,但是为了规范,还是填注册时用的邮箱吧. 4.保存到桌面 5.结果