如何在渲染功能中用纯 JavaScript 替换“v-bind:class”模板功能？答案

【问题标题】：How to replace "v-bind:class" Template Feature with Plain JavaScript in Render function?如何在渲染功能中用纯 JavaScript 替换“v-bind:class”模板功能？
【发布时间】：2017-04-17 15:31:18
【问题描述】：

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

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

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

【问题讨论】：

@yev 谢谢。我纠正了那个错误。但这是你误解我的问题的主要问题吗？我的问题的解释：正如我所展示的，我知道使用“v-bind”以通常的方式绑定它。就我而言，我不会对使用渲染函数创建元素产生同样的影响。如何/在哪里将我的对象与 Render 函数中的 CSS 类绑定？有没有办法做到这一点？怎么样？

标签： vue.js vuejs2 vue-component

【解决方案1】：

像这样。

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")
    ])
  }
}

【讨论】：

我已经试过了。它提供了将具有类的对象放在元素内的机会。但它不像通常的“v-bind”那样反应。我想说的是，如果您要更改“类”属性的值，则不会在 HTML 元素中自动进行更改。
@EvgeniyMiroshnichenko 如果您希望它具有反应性，那么您可能希望通过属性传递是否设置它。
@EvgeniyMiroshnichenko 我修改了这个例子，它肯定是被动的。单击按钮，更改 myClass，重新渲染。
@BartEvans 在我的情况下，我想对 data() 属性进行响应式处理。因为，具有类的对象的状态/值取决于组件内部的计算
@EvgeniyMiroshnichenko 我更新了示例，使其根据数据完全更改类。无论如何，您可以看到它仍然有效。我不确定你的问题是什么。 codepen.io/Kradek/pen/KmpLbV

【解决方案2】：

如果你想申请类“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

【讨论】：

你没有理解这个问题。正如您刚才所展示的，我知道必须以通常的方式绑定它。在我的例子中，我不会使用渲染函数来创建元素。