Vue中的上style标签内获取script标签中的变量

在 style 中使用 data 变量

options 方式:

<template>
  <div class="text">hello</div>
</template>
 
<script>
export default {
  data() {
    return {
      color: 'red'
    }
  }
}
</script>
 
<style>
.text {
  color: v-bind(color);
}
</style>

Composition 方式:

<script setup>
const theme = {
  color: 'red'
}
</script>
 
<template>
  <p>hello</p>
</template>
 
<style scoped>
p {
  color: v-bind('theme.color');
}
</style>

总结:

就是使用v-bind()的方式。