如何在 Render 函数中用 Plain JavaScript 替换 "v-bind:class" Template Feature？

Question

或者在没有 Plain JavaScript 的情况下还有其他更简单的方法吗？？？所以，我不明白如何将带有 CSS 类的对象绑定到我想使用渲染函数创建的模板。我只有一种方法，我必须使用纯 javascipt？或者我可能没有理解文档中的某些内容并且 Vue 提供了一些 Ready 解决方案？

我需要通过渲染函数获得与此相同的效果：

<template>
    <h1 v-bind:class="myClass"></h1>
</template>
<script>
    export default { 
      data(){
          return:{
              myClass: true,
          };
      }
    }
</script>

Answer 1

如果你想申请 class "myClass" 你应该这样做：

<template>
  <h1 :class="{myClass: isActive}"></h1>
</template>
<script>
    export default { 
      data(){
          return:{
              isActive: true
          };
      }
    }
</script>

查看 vue 文档：https://vuejs.org/v2/guide/class-and-style.html

Answer 2

像这样。

export default {
  data(){
    return {
      myClass: true,
    }
  },
  render(h){
    const data = {
      'class': {
        myClass: this.myClass
      }
    }
    return h("h1", data, "Hello World")
  }
}

Example.

请参阅此处 the documentation。

你可以看到这是反应式的。

export default {
  data(){
    return {
      myClass: true,
    }
  },
  methods:{
    clickHandler(){
      this.myClass = !this.myClass
    }
  },
  render(h){
    const data = {
      'class': {
        myClass: this.myClass
      }
    }
    return h("h1", data, [
      "Hello World",
      h("button", {on: {click: this.clickHandler}}, "Toggle")
    ])
  }
}

如何在 Render 函数中用 Plain JavaScript 替换 "v-bind:class" Template Feature？

How to replace "v-bind:class" Template Feature with Plain JavaScript in Render function?

vue.js

vue-component

vuejs2