mustache 变量不会在 class 或 id 标签中扩展

Question

我想在 vue 组件的 html 模板中使用变量扩展一个 id 和/或 class 标签。我用谷歌搜索但没有找到专门制作 id 或 class 标签。

我的大部分测试都归结为：

<script setup>
defineProps( {
  ids: {
    type: Number
  }
})
</script>
<script>
export default {
  name: "simple-component",
  nom: 1,
  data() {
    return {
      id: 1
    }
  }
}
</script>

<template>
  <div>{{ id }}</div>
 <div id="{{ ids }}" v-once class="Control-Template{{ id }}">

所以在这里我尝试了 2 个关于如何使用它的主要想法。该属性在 main.vue 中使用组件设置为一个数字。只有 id 的 div 用于验证是否设置了 id。
如果我使用

<Component ids="3"/>

在 main.vue 中并想在 test-div 中写出值它甚至不起作用。它仅适用于导出 ID。 nom 在 id 或 class 标签中效果不佳。
v-link 也不能以这种方式使用。

那么如何为用变量定义的 div 创建类/id 名称呢？
它应该使我的控件可识别以从推送数据更新内容数据。

所以我的用例在 main.vue 中多次使用相同的组件，每个实例都从服务器获取不同的数据来显示。

Answer 1

您需要在数据和 html 之间执行data binding。

Vue 按照以下方式处理它

利用 vue 提供的 key 绑定进行引用检查 key binding

您的代码将如下所示

<script setup>
defineProps( {
  ids: {
    type: Number
  }
})
</script>
<script>
export default {
  name: "simple-component",
  nom: 1,
  data() {
    return {
      id: 1
    }
  }
}
</script>

<template>
  <div>{{ id }}</div>
  <div :id="ids" v-once :class="'Control-Template'+id"></div>
</template>

查看sfc playground 以获取工作示例。