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

Question

我的组件是这样的:

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

当页面第一次重新加载时，我想检查 Prop 星号。如果 prop star 不等于 null，则添加类 test

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

有谁可以帮助我吗？

Answer 1

您不需要为此使用 jQuery。

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

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

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

您还可以执行以下操作:

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

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