Vue Js v-bind:class 语法不起作用？答案

【问题标题】：Vue Js v-bind:class syntax not working ?Vue Js v-bind:class 语法不起作用？
【发布时间】：2018-05-18 13:34:20
【问题描述】：

我是 VueJs 的新手，我遇到了一个小问题，首先这是我的示例 HTML 代码：

<div class="search">

        <input :class="{ longwidth : isActive }" v-show="showInput" type="text">
        <img @click="hideImgShowInput" v-show="hideImg" src="Assets/images/search-icon.png">

</div>

我完全遵循了文档，并且我使用 PHPStorm 作为编辑器，但是我更改“isActive”变量的函数不起作用我遇到了这个错误：

Attribute :class is not allowed here

任何帮助将不胜感激。

【问题讨论】：

这个错误是 Vue 还是 PHPStorm 发出的（可能与 Vue 模板语法不兼容）？
为 PhpStorm 下载一个 Vue 支持插件。它在全局存储库中。它应该可以解决问题。
十年月亮：eeror 是由 PhpStorm 发出的 .. 我不知道如何解决它 ..
El Danielo : 我会努力的，谢谢你的帮助。

标签： javascript html vue.js vuejs2 vue-directives

【解决方案1】：

这听起来像是 PHPStorm 警告。忽略它，或尝试使用 Vue 感知编辑器，如 vs code 或 atom。你的代码在我看来很好。

【讨论】：

【解决方案2】：

这个错误导致组件无法渲染

我的情况类似如下

<script type="text/x-template" id="game-row">
    <tr>
        <td>{{ title }}</td>
        ...
    </tr>
</script>

这种方式在将类属性添加到 tr 元素时，会导致提到的消息

<script type="text/x-template" id="game-row">
    <tr :class="{ active: isActive }">
        <td>{{ title }}</td>
        ...
    </tr>
</script>

修复的方法是在自定义组件调用中传递class属性，如下

<script type="text/x-template" id="game">
    <div>
        <p v-if="isLoading">Loading...</p>
        <template v-else>
            <table>
                <caption>Game {{ title }}</caption>
                <thead>
                    <tr>
                        <th>Name</th>
                    </tr>
                </thead>
                <tbody>
                    <tr
                        is="game-day-row"
                        v-for="game of games"
                        :class="{ 'active': isActive }" <!-- Here I set the class -->
                        :key="game.id"
                        :game="game"
                    ></tr>
                </tbody>
            </table>
        </template>
    </div>
</script>

你可以在 vue 类和样式指南中了解它

https://vuejs.org/v2/guide/class-and-style.html#With-Components

在 html 输出中，active 类被添加到 tr 元素中

【讨论】：