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 ...
随机推荐
- java日期和时间转换字符
日期和时间转换字符 字符 描述 例子 c 完整的日期和时间 Mon May 04 09:51:52 CDT 2009 F ISO 8601 格式日期 2004-02-09 D U.S. 格式日期 (月 ...
- 10、差异基因topGO富集
参考:http://www.biotrainee.com/thread-558-1-1.html http://bioconductor.org/packages/3.7/bioc/ http://w ...
- 【原创测试】MongoDB千万级插入数据测试(MMO在线游戏应用场合)
一.筹备 我们要做一次千万级的MONGODB测试,操作系统选用CentOS 5.5 64位版,基本模拟实际的使用环境,采用单机集群模型(测试单机多CPU情况下的实际效果). 测试基准数据: 服务器配置 ...
- App测试从入门到精通之交叉事件测试
交叉事件测试又叫事件或者叫冲突测试.对于正在运行的应用,若进入短信,电话等其他软件响应的情况,不会影响所测试应用,且会保证应用都能正确运行.下面我来看一下关于交叉测试中,我们测试人员需要考虑的一些测试 ...
- FutureTask子任务取消执行的状态判断
示例代码可以从github上获取 https://github.com/git-simm/simm-framework.git 一.业务场景: 系统中存在多种场景并发操作事务执行时互锁的情况,导致任务 ...
- AutoLayout自动布局之VFL语言代码实现(一个神奇的语言)
一.什么是VFL语言?为什么要VFL语言? VFL全称是Visual Format Language,翻译过来是“可视化格式语言” VFL是苹果公司为了简化Autolayout的编码而推出的抽象语言 ...
- 关于同时查询父子名称的SQL查询语句的写法 id name parentId parentName .
parentid是1就是id为1的公司的子公司 如图 查询出所有的信息后 由于我要呈现的是parentName 不是parentId所以想问下SQL语句怎么写 谢谢啦~~:) 解法: SELECT s ...
- eclipse导入tomcat
官网下载tomcat压缩包 官网:http://tomcat.apache.org/ tomcat8:链接:http://pan.baidu.com/s/1kVHAEoR 密码:kyt8 tomcat ...
- Nginx禁止直接通过IP地址访问网站
介绍下在nginx服务器禁止直接通过IP地址访问网站的方法,以避免别人恶意指向自己的IP,有需要的朋友参考下. 有时会遇到很多的恶意IP攻击,在Nginx下可以禁止IP访问. Nginx的默认虚拟主机 ...
- Thumbnail 图片帮助
public class Thumbnail { private Image srcImage; private string srcFileName; /// <summary> /// ...