Vue3 h函数 如何使用 v-bind ？

Question

这是一段凑字……这不可能不是一段凑字……这不是一段凑字吗？我想是的【手动狗头】

Answer 1

<template>
  <div>
    <h1>{{title}}</h1>
    <button v-bind:class="{ active: isActive }">Button</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'Vue 3 H Function Example',
      isActive: true,
    }
  },
  render() {
    return this.$createElement('div', {}, [
      this.$createElement('h1', {}, this.title),
      this.$createElement('button', { class: { active: this.isActive } }, 'Button')
    ]);
  }
}
</script>

在上面的示例中，使用 v-bind 指令来绑定 isActive 的值到 button 标签的 class 属性中,可以看到我们在组件的 render 钩子中使用 $createElement 函数来创建组件。

使用 v-bind 在 h 函数中绑定属性值需要使用 JSX 语法来渲染，需要对JSX语法有一定了解。