vue在scss中使用js的变量

Love The Way You Lie 2023-07-13 13:34 95阅读 0赞

在这里插入图片描述
注意：如果变量值是作用在伪类before、after的content上时，一定要在值上多包一层双引号：
正确示例：{ text: ‘“中”’ }
错误示例：{ text: ‘中’ }

  1. <template>
  2.     <div>
  3.         <span v-for="item in list" :style="{ '--text': item.text, '--color': item.color}"></span>
  4.     </div>
  5. </template>
  7. <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>
  9. <style lang="scss" scoped> span::after { content: var(--text); background-color: var(--color); } </style>

发表评论

表情：
评论列表 （有 0 条评论，95人围观）

还没有评论，来说两句吧...

相关阅读