Vue组件中如何用变量动态设置class与id属性？

在Vue模板里，Mustache语法（{{}}）不能直接用于HTML属性，得用v-bind指令（简写为:）来实现属性的动态绑定。下面针对你的需求给出具体实现：

1. 动态绑定id #

不管是用props接收的ids，还是组件内部data里的id，都可以通过:id直接绑定：

<template>
  <!-- 绑定props传入的ids -->
  <div :id="ids" v-once></div>
  <!-- 绑定内部data的id -->
  <div :id="id"></div>
</template>

注意：在父组件传递ids时，如果要传数值类型，要加冒号，否则会被当成字符串传递：

<!-- 正确传递数值3 -->
<Component :ids="3" />
<!-- 错误：传递的是字符串"3" -->
<Component ids="3" />

2. 动态绑定class #

静态类名和动态类名组合有两种常用方式：

方式一：字符串拼接 #

适合简单的动态后缀场景：

<template>
  <div :class="'Control-Template' + id"></div>
</template>

方式二：数组语法 #

适合多个动态类名或更复杂的判断场景：

<template>
  <div :class="['Control-Template', 'template-' + id]"></div>
  <!-- 带条件判断的动态类 -->
  <div :class="['Control-Template', { 'active': id === 1 }]"></div>
</template>

你的代码修改示例 #

结合你的原代码，修改后完整的组件代码如下：

<script setup>
defineProps({
  ids: {
    type: Number,
    required: true // 可选：如果ids是必填项可以加上
  }
})
</script>

<script>
export default {
  name: "simple-component",
  data() {
    return {
      id: 1
    }
  }
}
</script>

<template>
  <div>{{ id }}</div>
  <!-- 动态绑定id（来自props）和class（静态+动态） -->
  <div :id="ids" v-once :class="'Control-Template' + id"></div>
</template>

针对你的场景说明 #

通过这种方式，每个复用的组件实例都会有唯一的id和对应的class标识，后续服务端推送数据时，你可以根据这些标识精准定位到对应的组件实例进行内容更新。

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