Question

我正在使用VueJS 2.3.0，现在我需要在点击后更新HTML元素的类。

我有这个模板代码：

<template id="model-template">
    <span>
        <button v-on:click="activate" >{{ model.fu }} month</button>
    </span>
</template>

我刚刚查看了有关:class解决方案的VueJS官方文档，但我很困惑......

如果我使用jQuery，那么我将其编码为我想做的事情：

$('button').each(function() {
    $(this).click(function() {
        $('button').removeClass('clicked');
        $(this).addClass('clicked');
    });
});

更新：这是找到所有按钮，从每个按钮元素中删除'clicked'类，并将'clicked'类添加到仅用户点击的那个类。

我怎样才能在VueJS中做同样的事情？

Answer 1

activeClass是vue实例中的一个属性。下面的语法意味着active类的存在将取决于数据属性activeClass的真实性。即如果activeClass = true，则会添加active类，如果activeClass = false将从按钮中删除。

<template id="model-template">
    <span>
        <button v-bind:class="{active : activeClass}" >{{ model.fu }} month</button>
    </span>
</template>

一旦理解并实施，它将比jquery更简单。

jsfiddle如果你想看到它的实际效果： https://jsfiddle.net/riazxrazor/5jfnwav4/4/

如何在VueJS中单击后更新HTML元素类？

1 个答案: