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

我使用的是VueJS 2.3.0，现在我需要在点击它之后更新HTML元素的类。如何在VueJS中点击后更新HTML元素类？

我有这样的模板代码：

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

我刚刚查了VueJS官方文档大约:class解决方案，但我很困惑...

如果我使用jQuery，那么我这个代码做我想做的事：

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

UPDATE：这是发现所有的按钮，删除每一个按钮元素“点击”类，并添加“点击”类只有一个用户点击的是什么。

如何在VueJS中做同样的事情？

来源

2017-06-18 netdjw

你想从组件中的所有其他按钮删除点击类，然后将其添加到被点击的按钮？ – Bert

@BertEvans：是的，确切地说。 – netdjw

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/

来源

2017-06-18 11:22:19

看起来不错，但是这个解决方案只设置了true/false这个按钮元素的副本。我想将所有按钮设置为false，并且只有那个用户点击的是真实的。 – netdjw

我无法通过简单的方法实现，但必须先进行一些操作，但我设法做到了，你可以看看。 https://jsfiddle.net/riazxrazor/5jfnwav4/7/ –

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

回答

相关问题