如何在Vuejs中将类切换为body标签？答案

【问题标题】：How to toggle class to body tag in Vuejs?如何在Vuejs中将类切换为body标签？
【发布时间】：2016-07-02 03:25:33
【问题描述】：

如何切换body标签的类，我尝试了几种方法来解决我的问题，但仍然收到错误消息并且对此一无所知。所以，这就是我的故事：

在 body 标签上，我添加了 v-bind:class

<body id="app" v-bind:class='{active:showModal}'>

然后我收到了这些错误：

[Vue warn]: v-bind:class="{active:showModal}": attribute interpolation is not allowed in Vue.js directives and special attributes.
[Vue warn]: Invalid expression. Generated function body:  scope.active:scope.showModal
[Vue warn]: Error when evaluating expression "active:showModal". Turn on debug mode to see stack trace.

然后我尝试通过对 body 标签的这些更改来解决我的问题：

<body id="app" @v-bind:class='active:showModal'>

但我仍然有一个错误：

[Vue warn]: Invalid expression. Generated function body:  scope.active:scope.showModal

我该如何解决这个问题？

【问题讨论】：

我无法重现这个问题。我做了一个小提琴：jsfiddle.net/Linusborg/d791v4q8（检查元素，你会看到类的变化很好。我还用 body 标签进行了测试，效果和预期的一样）你能提供你的问题的重现吗？
我也试过这样的选项，它对我来说很好用。但不同的是，这个错误问题会在更大的应用程序中引起。我有示例演示，我制作并包含在我的网站上。 codepen.io/reinis/pen/grLVMG我在body标签之后立即嵌套了这个模板，模态和数据工作正常，但这个问题让人头疼。有什么想法吗？

标签： javascript data-binding vue.js

【解决方案1】：

Vue 正在尝试评估 active 的值，因为它没有被引用。只需添加引号：

<body id="app" :class='{"active":showModal}'>

【讨论】：

这导致了更多错误，就像以前一样。像这些：[Vue warn]: v-bind:class="{"active":showModal}": attribute interpolation is not allowed in Vue.js directives and special attributes. [Vue warn]: Invalid expression. Generated function body: "active":scope.showModal [Vue warn]: Error when evaluating expression ""active":showModal". Turn on debug mode to see stack trace.
谢谢一年多后 - 让我发疯了什么是错的，结果我有双“内双”
它也会抛出这个错误：[Vue warn]: Do not mount Vue to or - mount to normal elements.