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

Question

我的组件是这样的：

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

当页面第一次重新加载时，我想查看道具星。如果 prop star 不等于 null，则添加 class test

我试过上面的代码，但它不起作用

有没有人可以帮助我？

Answer 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}'

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

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

How to add class on vue.js 2?

javascript

vue.js

vue-component

vuejs2