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 ...
随机推荐
- DBMS ODBC JDBC是什么?
昨天躺在被窝里面看了几页电子书,今天写下来. 数据库就是存放数据的仓库. DBMS的意思是数据库管理系统,作用就是“管理”数据库的.“管理”这两个字简单说来就是“增删改查”.所以DBMS就是能够对数据 ...
- 在aspx页面中使用三元表达式
第一种使用方法:判断GridView绑定的数据是否为空 用GridView或其他控件绑定数据的时候,有时候需要判断从数据库中获取的值是否是空值,然后显示相应的内容,如果在后置代码中写的话只有是在Row ...
- Xcode弱网测试工具
Network Link Conditioner Network Link Conditioner工具是Mac下提供的一个弱网测试工具. 安装Network Link Conditioner Xcod ...
- 20169219 Nmap扫描实验
提交用 namp 对Windows 靶机,SEED靶机,Linux靶机的扫描的命令和结果进行截图 一.首先分析Linux靶机Metasploitable 扫描Metasploitableb靶机 扫描M ...
- 软件工程:Java实现WC.exe基本功能
项目相关要求 GitHub地址:https://github.com/3216004716/WC 实现一个统计程序,它能正确统计程序文件中的字符数.单词数.行数,以及还具备其他扩展功能,并能够快速地处 ...
- ASP.NET Session原理及处理方法
session是怎么存储,提取的 1.在服务器端有一个session池,用来存储每个用户提交session中的数据,Session对于每一个客户端(或者说浏览器实例)是“人手一份”,用户首次与Web服 ...
- JavaScript中事件冒泡之实例理解
此#btnComfirmChooseCompany是Bootstrap模态弹层上的按钮,但点击后,点击事件被Bootstrap外层监听到了, 效果就是模态弹出层被关闭了,所以,我不想这个点击事件被&q ...
- 个人JS体系整理(三)
一. 严格模式 JavaScript 严格模式(strict mode)即在严格的条件下运行.首先声明,严格模式是ES5中提出来的,准确来说就是一句指令Use strict,它的目的是指定代码在严格条 ...
- 如何设置linux支持上传的文件中文不乱吗
一.背景: 1.由于客户的需求,需要a链接打开的pdf文件,支持中文名称的 二.步骤 ①.查看当前编码 locale ②.编辑 vi /etc/profile 打开后结尾处添加 export LA ...
- kali linux之webshell
webacoo(web backdoor cookie) 类终端的shell 编码通信内容通过cookie头传输,隐蔽性较强 cm:base64编码的命令 cn:服务器用于返回数据的cookie头的名 ...