Vue3中如何使用SCSS为动态属性值设置样式？

方法一：使用Vue3样式v-bind语法 #

Vue3支持在<style>中直接绑定响应式状态，修正你的样式代码即可：

<script setup lang="ts"> 
const currentSelectedId = ref(1); 
</script> 

<template> 
<row class="b-grid-row" data-id="1"></row> 
<row class="b-grid-row" data-id="2"></row> 
<row class="b-grid-row" data-id="3"></row> 
</template> 

<style lang="scss"> 
// 注意属性选择器的正确格式，用v-bind绑定响应式变量
:deep(.b-grid-row[data-id="v-bind(currentSelectedId)"]) { 
  background-color: blue; 
} 
</style>

注意点：

• 属性选择器需写成[data-id="值"]的格式，不要把data-id当作单独标签使用
• 样式中通过v-bind(变量名)绑定响应式状态，无需额外模板字符串语法

方法二：动态绑定class（更直观） #

在模板中给匹配data-id的元素添加专属类名，再通过类名设置样式：

<script setup lang="ts"> 
const currentSelectedId = ref(1); 
</script> 

<template> 
<!-- 动态判断data-id是否等于currentSelectedId，匹配则添加selected类 -->
<row 
  class="b-grid-row" 
  :data-id="1"
  :class="{ selected: currentSelectedId === 1 }"
></row> 
<row 
  class="b-grid-row" 
  :data-id="2"
  :class="{ selected: currentSelectedId === 2 }"
></row> 
<row 
  class="b-grid-row" 
  :data-id="3"
  :class="{ selected: currentSelectedId === 3 }"
></row> 
</template> 

<style lang="scss"> 
:deep(.b-grid-row.selected) { 
  background-color: blue; 
} 
</style>

如果row元素是循环生成的（更贴合实际开发场景），可以简化模板：

<script setup lang="ts"> 
const currentSelectedId = ref(1); 
const rowIds = [1,2,3];
</script> 

<template> 
<row 
  v-for="id in rowIds"
  :key="id"
  class="b-grid-row" 
  :data-id="id"
  :class="{ selected: currentSelectedId === id }"
></row> 
</template> 

<style lang="scss"> 
:deep(.b-grid-row.selected) { 
  background-color: blue; 
} 
</style>

内容的提问来源于stack exchange，提问作者Banus