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 ...
随机推荐
- 为Vmware里安装的CentOS7.5设置静态IP
[引言]为测试搭建大数据集群环境,采用在Vmware里安装了几台CentOS7.5的虚拟机,在测试过程中,出现启动虚拟机后,虚拟机的IP地址会变,不方便测试集群,所以需要设置静态IP,在此,记录我的设 ...
- PHP文件的引用
require "文件名" 或 include("文件名") 区别:若所包含文件出现错误,include()产生一个警告,require会导致程序终止
- HTTP文件上传插件开发文档-ASP
版权所有 2009-2016 荆门泽优软件有限公司 保留所有权利 官方网站:http://www.ncmem.com/ 产品首页:http://www.ncmem.com/webplug/http-u ...
- Git代码冲突常见解决方法
在发布这个配置文件的时候,会发生代码冲突: error: Your local changes to the following files would be overwritten by merge ...
- [原创]Java源代码学习
一.一些关键字 方法声明中的native:调用本地方法,该方法一般是用C或者C++写的 变量声明中的transient:在序列化过程中会忽略该变量,即不进行序列化保存 变量声明中的volatile:编 ...
- C# 真正完美的 汉字转拼音
网上有很多说自己整理的汉字转拼音是完美的,但使用后才发现都是半吊的瓶子,问题多多. 常见的生僻字,或多音字识别,转换后简直让人感觉可怕. 主流的转换有三种:hash匹配,Npinyin,微软PinYi ...
- 所谓IIS未注册引起的故障及解决
- css 引入的方式有哪些, link和@import的区别是什么
有四种形式: 1.链入外部样式表,就是把样式表保存为一个样式表文件,然后在页面中用<link rel = "stylesheet" type="text/css&q ...
- [51nod1236] 序列求和 V3(斐波那契数列)
题面 传送门 题解 把求和的柿子用斐波那契数列的通项公式展开 \[ \begin{aligned} Ans &=\sum\limits_{i = 1}^{n} \left(\frac{(\fr ...
- SDUT OJ 顺序表应用1:多余元素删除之移位算法
顺序表应用1:多余元素删除之移位算法 Time Limit: 1000 ms Memory Limit: 650 KiB Submit Statistic Discuss Problem Descri ...