css - 如何在单击时使用 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
    }
});

样式表

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

    .available span{
        background: green;
    }

我希望 span 背景最初为绿色，但在点击后变为红色。

Answer 1

在您的点击处理程序中，您试图切换 available 变量，它实际上是您的 css 类的名称。类绑定(bind)的语法如下:v-bind:"{classtotoggle: variable}"。

所以你应该写:

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

作为一个建议，我总是使用一个函数来处理事件(v-on 指令)，它使将来添加行为变得更容易。

希望对你有帮助，