vue3 怎么根据判断动态添加标签属性

在 Vue 3 中，可以使用 `v-bind` 指令动态绑定属性。你可以在模板中使用 JavaScript 表达式来动态计算属性值，从而实现动态添加标签属性。例如：

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

<script>
import { reactive } from 'vue'

export default {
  data() {
    return {
      message: 'Hello, Vue 3!',
      textColor: 'red',
      title: 'This is a title'
    }
  },
  mounted() {
    // 动态添加属性
    this.$data.newProp = 'new value'

    // 动态计算属性值
    this.$data.title = this.$data.message
  }
}
</script>

在上面的代码中，我们使用 `v-bind` 指令动态绑定了 `style` 和 `title` 属性，分别使用了 `textColor` 和 `title` 变量的值。在 `mounted` 钩子函数中，我们动态地添加了一个普通属性 `newProp`，并将 `title` 属性的值修改为 `message` 变量的值，实现了动态添加标签属性的效果。