vue采坑之——vue里面渲染html 并添加样式
在工作中,有次遇到要把返回的字符串分割成两部分,一部分用另外的样式显示。
这时候,我想通过对得到字符串进行处理,在需要特别样式的字符串片段用html标签(用的span)包裹起来再通过变量绑定就好了。不过此时绑定变量的vue指令要用v-html。
测试方案的过程很顺利。不过后面单独为自动添加的标签(span)设定需要的css样式时(直接在vue单页面的css区域加的样式),并没有起作用,浏览器检查元素style特性也没有看到设定的属性。这就很头大了。无奈,去网上去搜搜看有没有别人可以借鉴的经验,没想到很快就找到了。废话不多说,解决方案如下:
1、scoped属性导致css仅对当前组件生效(用css3的属性选择器+生成的随机属性实现的),而html绑定渲染出的内容可以理解为是子组件的内容,子组件不会被加上对应的属性,所以不会应用css.解决的话把scoped属性去掉就行了
生成的随机属性就是类似于data-v-146ebe36的东西。 vue中scoped的设计思想就是让当前组件的样式不会修改到其它地方的样式,使用了data-v-hash的方式来使css有了它对应模块的标识,这样写css的时候不需要加太多额外的选择器,方便很多。
2、另外一种常用的方法利用vue的深度作用选择器。要为v-html渲染出中的标签添加CSS样式,我们需要在写样式的时候添加>>>就可以搞定了,如下:
<style scoped>
>>> p {
font-size: 14px;
line-height: 28px;
text-align: left;
color: rgb(238, 238, 238);
color: #585858;
text-indent: 2em;
}
</style>
可以参考另一篇总结比较好的博客文章:https://www.cnblogs.com/goloving/p/9119460.html
vue采坑之——vue里面渲染html 并添加样式的更多相关文章
- VUE 采坑之旅-- Mint-ui 按需引入报出Module build failed: Error: Couldn't find preset "es2015" relative to directory "C:\\phpStudy\\PHPTutorial\\WWW\\text\\vuep\\vue-demo"
首先按照mint-ui的文档中按需引入的要求,先执行 npm install babel-plugin-component -D 然后,将.babelrc文件替换了,但是后来我又将其改了(采坑过程我也 ...
- vue采坑一:全局API
Vue.set Vue.set( target, key, value ),target不能是 Vue 实例,或者 Vue 实例的根数据对象,因为源码中做了如下判断: var ob = (target ...
- vue 采坑
1.ref 在父组件中访问子组件实例,或者直接操作DOM元素时需要ref <input ref="ipt"> 通过this.$refs.ipt 得到此input $re ...
- vue采坑及较好的文章汇总
1:父子组件传动态传值 https://www.cnblogs.com/daiwenru/p/6694530.html -----互传数据基本流程 https://blog.csdn.net/qq_ ...
- vue采坑记录
1.项目在浏览器运行的时候没有ico图标 <link rel="shortcut icon" type="image/x-icon" href=" ...
- vue踩坑记录:[Vue warn]: $attrs is readonly.
今天在用element-ui的DatePicker日期选择器的时候,发现每当点击一次这个组件,控制台就会报警告`[Vue warn]: $attrs is readonly`,但是也不影响实际操作效果 ...
- vue踩坑之路--点击按钮改变div样式
有时候,我们在做项目的时候,想通过某个按钮来改变某个div样式,那么可以通过以下代码实现: <!DOCTYPE html> <html> <head> <me ...
- vue踩坑:vue+ element ui 表单验证有值但验证失败。
一.如图:有值但是验证失败 二. <el-form :model="form" :rules="rules"> <el-form-item l ...
- vue项目打包采坑
1. vue项目打包采坑 1.1. vue运行报错error:Cannot assign to read only property 'exports' of object '#' 这个错误我是在打包 ...
随机推荐
- Leetcode题目543:二叉树的直径(简单)
题目描述: 给定一棵二叉树,你需要计算它的直径长度.一棵二叉树的直径长度是任意两个结点路径长度中的最大值.这条路径可能穿过根结点. 示例 :给定二叉树 1 / \ 2 3 / \ 4 5 返回 3, ...
- Jmeter Web 性能测试入门 (一):环境配置 (免安装版)
去官网下载并安装java jdk8 去官网下载jmeter binaries最新的zip,并解压到某路径下.(注:由于jmeter-server的限制,放置的路径不要太长,路径不要带空格,例如:D:\ ...
- windows把zookeeper注册成服务
1.官网下载zookeeper:http://mirrors.hust.edu.cn/apache/zookeeper/. 2.修改zookeeper下面的文件/zookeeper/conf/zoo_ ...
- Mysql 清空数据后,释放硬盘文件
删除表数据后执行:optimize table [表名]
- python Image 模块处理图片
Python-Image 基本的图像处理操作,有需要的朋友可以参考下. Python 里面最常用的图像操作库是 pip install Pillow #安装模块 from PIL import Ima ...
- 数据分析 - Excel 配色, 绘图, 技巧
美学 配色 画图本身是美学的展示, 出色的配色是必须的 虽然本身美学并不是数据分析的必要, 但是也不能太low 如果做的太丑展示也是很尴尬 配色网站 点击这里 配置 现版本的 excel 中已存在较为 ...
- 新maven项目创建JSP出现小红叉报错 javax.servlet.http.HttpServlet not found
展示: 右击项目----build path -----Configure Build Path 进入到窗口 libraries -------add libraries ------ server ...
- 分组卷积+squeezenet+mobilenet+shufflenet的参数及运算量计算
来一发普通的二维卷积 1.输入feature map的格式为:m * m * h1 2.卷积核为 k * k 3.输出feature map的格式为: n * n * h2 参数量:k * k * h ...
- vim实现批量注释和批量删除注释
批量注释 1.进入文档,vim test.txt 后,按住ctrl+v进入VISUAL BLOCK模式,上下选择需要注释的行 2.按大写键,再按i,或者直接按shift+i,进入INSERT模式,输入 ...
- 【ARM-Linux开发】cmem模块/DVSDK2.0
1. CMEM--高速缓存一致性问题的解决多核设计中,共享的二级高速缓存之间数据可能不一致,不同CPU内核的私有高速缓存也可能存在数据不一致,称为高速缓存的一致性问题.解决一致性问题的方法从整体上分可 ...