<template>
<div>
<span v-for="item in list" :style="{'--text': item.text, '--color': item.color}"></span>
</div>
</template>
<script>
export default {
name: '',
components: {},
props: {},
data() {
return {
list: [
{ text: '"中"', color: 'red' },
{ text: '"華"', color: 'orange' },
{ text: '"人"', color: 'yellow' },
{ text: '"民"', color: 'orange' },
{ text: '"共"', color: 'green' },
{ text: '"和"', color: 'cyan' },
{ text: '"國"', color: 'blue' }
]
};
}
};
</script>
<style lang="scss" scoped>
span::after {
content: var(--text);
background-color: var(--color);
}
</style>
vue在scss中使用js的變量
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.