如何在 vue.js 2 上添加类？

【问题标题】：How to add class on vue.js 2?如何在 vue.js 2 上添加类？
【发布时间】：2017-03-01 10:55:17
【问题描述】：

我的组件是这样的：

<template>
    <span class="rating">
        ...
    </span>
</template>
<script>
    export default{
        props: {
            'star': null
        }, 
        created: function() {
            if(this.star != null)
                $(".rating").addClass('test');
        }
    }
</script>

第一次重新加载页面时，我想检查道具星。如果道具星不等于null，则添加类测试

我尝试像上面的代码一样，但它不起作用

有没有人可以帮助我？

【问题讨论】：

标签： javascript vue.js vuejs2 vue-component

【解决方案1】：

你不需要为此使用 jQuery。

<template>
    <span :class='{"rating": star !== null}'>
        ...
    </span>
</template>
<script>
    export default{
        props: {
            'star': null
        }
    }
</script>

:class 是属性绑定语法，你可以说它现在可以访问你的vue-component 中的变量。

{'rating': star !== null} 这个简单的布尔表达式将确保是否必须添加 .rating。

你也可以这样做：

:class='{"rating": !!star}'

如果表达式的计算结果为真值，您将应用该类。

【讨论】：