在工作中，有次遇到要把返回的字符串分割成两部分，一部分用另外的样式显示。

这时候，我想通过对得到字符串进行处理，在需要特别样式的字符串片段用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样式，我们需要在写样式的时候添加>>>就可以搞定了，如下：

>>> p {

font-size: 14px;

line-height: 28px;

text-align: left;

color: rgb(238, 238, 238);

color: #585858;

text-indent: 2em;

}

vue采坑一：全局API

Vue.set Vue.set( target, key, value ),target不能是 Vue 实例,或者 Vue 实例的根数据对象,因为源码中做了如下判断: var ob = (target ...

vue 采坑

1.ref 在父组件中访问子组件实例,或者直接操作DOM元素时需要ref 通过this.$refs.ipt 得到此input $re ...

vue采坑及较好的文章汇总

1:父子组件传动态传值 https://www.cnblogs.com/daiwenru/p/6694530.html  -----互传数据基本流程 https://blog.csdn.net/qq_ ...

vue采坑记录

1.项目在浏览器运行的时候没有ico图标

vue踩坑记录:[Vue warn]: $attrs is readonly.

今天在用element-ui的DatePicker日期选择器的时候,发现每当点击一次这个组件,控制台就会报警告`[Vue warn]: $attrs is readonly`,但是也不影响实际操作效果 ...

vue踩坑之路--点击按钮改变div样式

有时候,我们在做项目的时候,想通过某个按钮来改变某个div样式,那么可以通过以下代码实现:

vue踩坑：vue+ element ui 表单验证有值但验证失败。

一.如图:有值但是验证失败 二.

vue项目打包采坑

1. vue项目打包采坑 1.1. vue运行报错error:Cannot assign to read only property 'exports' of object '#' 这个错误我是在打包 ...

随机推荐

【BZOJ2223/3524】[Coci 2009]PATULJCI

Description Input   Output 10 3 1 2 1 2 1 2 3 2 3 3 8 1 2 1 3 1 4 1 5 2 5 2 6 6 9 7 10 Sample Input ...

启用 mvc webapi 的 session功能可用

默认 mvc webapi 不开启 session 会话支持 所以需要修改配置,在 Global 开启 session 支持 如下: 1.重写 init() 方法 public override vo ...

MySQL索引与优化策略

1. MySQL索引实现 在MySQL中,索引属于存储引擎级别的概念,不同存储引擎对索引的实现方式是不同的,下面主要讨论MyISAM和InnoDB两个存储引擎的索引实现方式. MyISAM索引实现 M ...

粗谈Android中的对齐

在谈这个之前先啰嗦几个概念. 基线:书写英语单词时为了规范书写会设有四条线,从上至下第三条就是基线.基线对齐主要是为了两个控件中显示的英文单词的基线对齐,如下所示: Start:在看API的时候经常会 ...

ORA-20000: ORU-10027: buffer overflow, limit of 10000 bytes

要用dbms_output.put_line来输出语句,遇到以下错误: ERROR 位于第 1 行: ORA-20000: ORU-10027: buffer overflow, limit ...

MySQL 升级方法指南大全

原文:MySQL 升级方法指南大全 通常,从一个发布版本升级到另一个版本时,我们建议按照顺序来升级版本.例如,想要升级 MySQL 3.23 时,先升级到 MySQL 4.0,而不是直接升级到 MyS ...

安装php的lavavel框架的流程(亲测)

windows上安装配置laravel 初次接触laravel会觉得它的安装方式比较不一样,与Linux上安装软件的方式很相似. 学习laravel的最好方式当然是看官方文档,笔者就在这里讲官方文档上 ...

CentOS设置网络，设置IP地址

1.登录CentOS. 2.# dhclient 自动获取IP地址 3.# ip addr 1).第一个地址127.0.0.1是回环地址,网卡名叫做lo,Windows操作系统也有该地址,用来和自己通 ...

WPF 定义Lookless控件的默认样式、 OnApplyTemplate 如何使用(实现方式、如何工作的)！

写的非常详细: 作者地址:https://www.cnblogs.com/atskyline/archive/2012/11/16/2773806.html 参考资料: http://www.code ...