外贸有限公司英文网站/seo关键词优化的技巧
vue 组件中添加样式不生效的解决方法
如何产生
在开发项目中遇到在组件中添加样式不生效的情况。具体场景如下
vue 组件
//我用js在上面div标签中插入一个
text goes here
export default {
...
mounted(){
$('.box').html('
text goes here
')},
...
}
//style ， vue组件scoped样式都会在选择器的最后加上data-v-***属性
//样式添加了scoped
.box{
color:red;
}
.text{
color:blue;
}
浏览器渲染的html 和 style 如下：
//html
text goes here
//style
.box[data-v-33f8ed40]{
color:red;
}
.text[data-v-33f8ed40]{ //样式不生效，因为p标签里没有属性data-v-33f8ed40
color:blue;
}
如何解决
很简单将去掉 style 的 scoped 属性。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
时间： 2018-07-06
vue-cli中已经内置配置好了sass 以及lass的配置.如果需要的话直接下载两个模块就可以了,webpack它会根据 lang 属性自动用适当的加载器去处理. 如果需要使用sass,则安装: npm install node-sass --save-dev npm install sass-loader --save-dev 如果需要使用less,则安装: npm install less --save-dev npm install less-loader --save-dev sass
一.污染是如何产生的? 得益于 Vue-loader,在 Vue 中可以使用类似于 Web Component 的组件化写法, ,在大多数情况下,我们希望组件间定义的样式是相互隔离的,在 Weex 当中的确如此,组件天生隔离,可是在 Vue 当中,运行的载体还是浏览器,所有的样式类还是会通过 style 标签插入头部,影响全局,
在使用 vue 的开发中,我们有时会引用外部组件,包括 UI 组件(ElementUI.iview). 当
本文实例为大家分享了Vuejs实现单文件组件的方法,供大家参考,具体内容如下 代码如下: example.html
Vue component
如下所示: 直接写style注意不加scoped,然后用一个组件最外层的class包裹住,就不会改到所有的组件的样式了. 以上这篇vue中element组件样式修改无效的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: Vue 组件间的样式冲突污染 浅谈vue中改elementUI默认样式引发的st
最近做的一个项目是基于 vue + AntDesign 的.由于项目要求,需要在 Table 组件的行内点右键的时候弹出菜单.在线演示地址及最终效果图如下: 在线演示地址>> 首先新建一个Table组件的实例: ... c
我就废话不多说了,大家还是直接看代码吧~ 解决方法如下: 广告位设置
在实际开发中,我们可能需要拿到组件声明时创建的一些属性,比较典型的话就是name属性,在实际开发中需要定位问题时,需要找到是哪一个组件,但是我们总不可能写代码的时候去先找到组件的name属性,然后复制粘贴,作为参数传给函数吧. 例如: catchError('componentsName', 'errorDescription') 太傻了. 解决办法,获取到组件的this,然后利用this去拿到组件的name属性,这样的话,代码就可以这么写: catchError.call(this, 'err
本文实例讲述了PHP中file_exists()判断中文文件名无效的解决方法.分享给大家供大家参考.具体方法如下: php中判断文件是否存在我们会使用file_exists函数或is_file函数,但在使用file_exists时如果你文件名或路径是中文在uft8编码文档时是无效.本文就来解决此问题,下面我们一起来看看. 定义和用法: file_exists() 函数检查文件或目录是否存在. 如果指定的文件或目录存在则返回 true,否则返回 false. 例子1 复制代码 代码如下: <?ph
1.npm安装 npm install babel-polyfill npm install es6-promise package.json中会出现 "babel-polyfill": "^6.26.0", "es6-promise": "^4.1.1", 2.main.js引入 import 'babel-polyfill' import Vue from 'vue' import Es6Promise from 'es6
JS中appendChild追加子节点无效 有这么一段代码: let divs = document.getElementsByClassName('test'); let btn = document.createElement('div'); for(let i=0;i
解决办法: 加上.native覆盖原有封装的keyup事件即可. 以上这篇vue element-ui 绑定@keyup事件无效的解
1.用到了before-upload属性, 用于在上传文件前的校验,并且发送请求给后端,传输格式进行文件流传输 什么都不用设置,action属性随便设置,不能为空即可! 在before-upload属性的方法中的代码如下: var _this = this; debugger; // var files=file.target.files[0]; debugger; const isJPG = file.type === "image/jpeg"; const isLt2M = fil
一.日历组件 new Date()的月份是从0开始的. 下面表达式是:2018年6月1日 new Date(2018, 5, 1); 下面表达式是:2018年5月1日 new Date(2018, 4, 1); 或 new Date(2018, 5-1, 1); 下面表达式是:2018年5月31日(得到上个月的最后一天) new Date(2018, 5 , 0); 日的参数可以是0,也可以是负数,表示上个月底的那一天. 下面表达式是:2018年7月01日 new Date(2018, 5, 3