我使用的插件会创建动态html,我想使用通过props传递的十六进制添加动态background-color
。
这是我组件中的html
<template>
<div class="pagination" slot="pagination"></div>
</template>
生成动态HTML
<div class="pagination" slot="pagination">
<span class="swiper-pagination-bullet"></span>
<span class="swiper-pagination-bullet"></span>
</div>
组件接收道具
props: ['primaryBgColor']
如果我写的话,我显然可以在模板中看到颜色
<template>
<div>
{{ this.primaryBgColor }}
</div>
</template>
但是当我在组件中编写样式时
<style>
.swiper-pagination-bullet {
background-color: {{ this.primaryBgColor }}
}
</style>
Webpack返回一个错误,说我有CSS语法错误。有任何想法吗?
最佳答案
在模板中,您可以直接注入样式
<template>
<div :style="this.primaryBgColor">
{{ this.primaryBgColor }}
</div>
</template>
primaryBgColor应该包含
{'background':"#cccc"}
之类的对象对于更多选择,vuejs具有出色的文档。您可以参考https://vuejs.org/v2/guide/class-and-style.html#Object-Syntax-1
我们可以查询元素并应用样式,如下所示
mounted: function () {
var elems = document.querySelectorAll('.swiper-pagination-bullet ')
var index = 0
var length = elems.length
for (; index < length; index++) {
elems[index].style.backgroundColor = this.primaryBgColor
}
},