如何在单击时使用Vue切换/停用活动的html类？

Question

我正在尝试这种平和的代码来通过vue单击事件来切换类。但无法正常工作，并在控制台中显示束或错误。你能帮我吗？

<div id="app5">
    <h1>Dynamic CSS</h1>
    <h2>Example 1</h2>

    <div
            v-bind:class="{available: value}"
            v-on:click="available = !available">
        <span>Click</span>

    </div>
</div>


var app5=new Vue({
    el:'#app5',
    data:{
        value: true,
        nearby:false
    }
});

sylesheet

  span{
        background:red;
        color: #fff;
    }

    .available span{
        background: green;
    }

我希望点击后的范围背景最初为绿色，但红色。

Answer 1

您必须切换value onclick v-on:click="value = !value"，检查下面的代码。

var app5=new Vue({
    el:'#app5',
    data:{
        value: true,
        nearby:false
    }
});

span{
        background:red;
        color: #fff;
    }

    .available span{
        background: green;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app5">
    <h1>Dynamic CSS</h1>
    <h2>Example 1</h2>

    <div
            v-bind:class="{available: value}"
            v-on:click="value = !value">
        <span>Click</span>

    </div>
</div>

Answer 2

在点击处理程序中，您尝试切换(function(){ var copy = 'test 1'; for (let i = 0; i < 2; i++) { let t = copy.replace(/(\d+)/, function (fullMatch, n) {return `${Number(n) + 1}`;}); console.log(t); copy = t; //copy is the outer variable } })();变量，该变量实际上是CSS类的名称。类绑定的语法如下：available。

所以你应该写：

v-bind:"{classtotoggle: variable}"

作为建议，我总是会使用一个函数来处理事件（<div v-bind:class="{available: value}" v-on:click="value = !value"> <span>Click</span> </div> 指令），这使得将来添加行为变得更加容易。

希望有帮助，