如何用Render函數中的普通JavaScript代替「v-bind：class」模板特性？

或者可能有其他更簡單的方法來做到這一點，沒有普通的JavaScript？所以，我不明白如何將我的對象與CSS類綁定到我想用render函數創建的模板。我只有一種方法，我必須使用普通的javascipt？或者我可能不理解文檔中的某些內容，並且Vue提供了一些Ready解決方案？如何用Render函數中的普通JavaScript代替「v-bind：class」模板特性？

我需要得到同樣的影響與渲染功能如下：

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

來源

2017-04-17 Evgeniy Miroshnichenko

@yev謝謝。我糾正了這個錯誤。但是，這是你誤解我的問題的主要問題？我的問題的解釋：我知道希望按照通常的方式使用「v-bind」來綁定它，如我所示。在我的情況下，我不會使用Render Function創建一個元素來產生同樣的效果。如何/在哪裏綁定我的對象與渲染功能內的CSS類？有沒有辦法做到這一點？怎麼樣？ –

像這樣。

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

來源

2017-04-17 16:15:41 Bert

我已經試過了。它提供了將對象與類放入元素中的機會。但它像往常一樣沒有反應「v綁定」。我試圖說，如果您要更改「類」屬性的值，那麼更改將不會在您的HTML元素中自動完成。 –

@EvgeniyMiroshnichenko如果您希望它是被動的，那麼您可能想要通過是否通過屬性設置它。 – Bert

@EvgeniyMiroshnichenko我修改了這個例子，它肯定是被動的。點擊按鈕，更改myClass，重新渲染。 – Bert

如果你想應用類「MyClass的」你應該這樣做：

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

見VUE DOC：https://vuejs.org/v2/guide/class-and-style.html

來源

2017-04-17 15:58:07

你不明白這個問題。正如你剛纔所展示的那樣，我知道希望以通常的方式將其綁定。在我的情況下，我不會使用Render Function創建一個元素來產生同樣的效果。 –

如何用Render函數中的普通JavaScript代替「v-bind：class」模板特性？

回答

相關問題