vue移除伪元素_Vue 动态样式黑魔法（超实用）

​ 众所周知，Vue 中动态绑定样式是用 :style，或者是动态绑定 :class class，不同的 class 样式提前写好且不一样。但是如果是 ::after伪元素或者要改变的样式用 js 计算很复杂但是用 CSS 计算很简单的话，这种方法就略显得麻烦。有没有什么办法能用 Vue 直接改变 CSS，而不用这一套绑定的办法呢。答案是有的！

​ 这里给出两个实现方案。

第一个方案——动态 style 标签

其实早在 Vue 0.x 和 1.x 版本这样做一度很流行(和这种升级的方案略有不同)

第一个例子

.foo[data-id="{{ uniqueId }}"] {

color: {{ color }};

}

.foo[data-id="{{ uniqueId }}"] .bar {

text-align: {{ align }}

}

hello world

export default {

computed: {

uniqueId() {

return 一个独一无二的id; // 是因为这样生成的 style 没有 scoped，别的组件也能使用这个样式 },

color() {

return someCondition ? 'red' : '#000';

},

align() {

return someCondition ? 'left' : 'right';

}

}

}

第二个例子

.{{ className }} {

background: {{ bgColor }};

position: relative;

}

.{{ className }}:hover {

color: {{ hoverColor }};

}

.{{ className }}::after {

content: '';

display: block;

height: 40px;

width: 40px;

border: 1px solid black;

border-radius: 50%;

position: absolute;

top: 100%;

}

Vue.component('v-style', {

render: function (createElement) {

return createElement('style', this.$slots.default)

}

});

export default {

data () {

return {

className: "temp",

hoverColor: "yellow",

bgColor: "blue"

}

},

computed () {

// 这里和上面一样，所以略去生成 uniqueId 的过程 }

}

第二个方案——CSS 变量

上面的方案之所以被 Vue 官方不赞成，是因为 Vue 在每次渲染的时候会把每个组件的 style 标签单独拎出来，比较耗费性能。所以有没有一个直观的方案就是 Vue 直接操纵 CSS 呢，有的，借助 CSS 变量就可以。

hello world

hello earth

export default {

data() {

return {

spanStyle: {

"--color": "red"

},

widthVar: "100px"

};

}

}

.span1 {

color: var(--color);

}

.span2 {

text-align: center;

position: relative;

width: var(--width);

}

.span2::after {

content: '';

display: block;

position: absolute;

left: 100%;

width: var(--width);

height: var(--width);

border-radius: 50%;

border: 2px solid black;

}

但相信大多数人写 Vue 用的都是 CSS 预处理器，这里也给出使用预处理器使用这种方案的方法(我这里给出 Sass 的用法，Stylus，Less与之类似)

// 只在使用 CSS 变量的时候和前面略有不同

.span2

width: #{'var(--width)'}

这里的#{'var(--width)'}是 Sass 里的插值，类似于 js 里的${}。官方的解释用法见下图。

意思就是这样插入一个字符串，在把 Sass 编译成 CSS 后会完整地保留引号之内的内容(既然 Sass 不能直接使用 CSS 变量，那就编译后使用嘛)。其它的预处理器应该都有类似的插值语法，大家在官方文档里搜索关键词 interpolation或者quoted string应该就可以查到了。

总结

第二种方案虽然用起来直观，但不是说第一种方案就一无是处了。第一种方案在用来动态定义全局 CSS 变量的时候很好用。例子如下

:root {

--bg-color: {{bgColor}};

--box-size: {{boxSize}};

}

export default {

data () {

return {

bgColor: "white",

boxSize: "30px"

}

}

}

将二者相辅相成并且结合 Vue 原有的:class和:style，相信大家能写出更优雅的 Vue 代码。

来更新一下啦，又发现一个将 Sass(SCSS) 变量和 js 共享的方法，我试了一下，应该是 webpack 没配置好，没成功，大家可以试一下