vue3 typescript 如何根据判断动态添加标签属性

在 Vue 3 中，使用 TypeScript 来实现动态添加标签属性，可以通过定义一个接口来描述组件的属性和方法，并使用 `defineComponent` 函数来创建组件。然后在组件中使用 `ref` 来引用动态添加的元素，并使用 `v-bind` 指令来动态绑定属性。例如：

<template>
  <div v-bind:class="className" v-bind:style="{ color: textColor }">
    <span v-bind:title="title" v-bind:ref="refName">{{ message }}</span>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'

interface MyComponentProps {
  message: string
  textColor?: string
  className?: string
}

export default defineComponent({
  name: 'MyComponent',
  props: {
    message: { type: String, required: true },
    textColor: { type: String },
    className: { type: String }
  },
  setup(props: MyComponentProps) {
    const refName = ref<string>('myRef')
    const title = ref<string>(props.message)

    // 动态添加属性
    const myObj = reactive({})
    myObj['newProp'] = 'new value'

    // 动态计算属性值
    if (props.textColor === 'red') {
      myObj['textColor'] = 'red'
    }

    return {
      refName,
      title,
      myObj
    }
  }
})
</script>

在上面的代码中，我们首先定义了一个接口 `MyComponentProps`，描述了组件的属性和方法。然后使用 `defineComponent` 函数创建组件，并在 `setup` 函数中动态添加了一个 `newProp` 属性和一个响应式对象 `myObj`，并使用 `if` 语句来动态计算 `textColor` 属性的值。在模板中，我们使用 `v-bind` 指令动态绑定了 `class`、`style`、`title` 和 `ref` 属性，分别使用了 `className`、`textColor`、`title` 和 `refName` 变量的值，实现了动态添加标签属性的效果。