Css 如何在单击时使用Vue切换/取消激活活动html类？

我正在尝试通过点击事件通过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背景最初是绿色的，但单击后是红色的。您必须切换

value

onclick

v-on:click=“value=！value”

检查下面的代码

var app5=新的Vue({
el:'附录5'，
数据：{
价值观：正确，
附近：假
}
});
span{
背景：红色；
颜色：#fff；
}
.可用跨度{
背景：绿色；
}

动态CSS
例1
点击
您必须切换
value
onclick
v-on:click=“value=！value”
检查下面的代码


var app5=新的Vue({
el:'附录5'，
数据：{
价值观：正确，
附近：假
}
});
span{
背景：红色；
颜色：#fff；
}
.可用跨度{
背景：绿色；
}

动态CSS
例1
点击
在单击处理程序中，您试图切换可用的
变量，该变量实际上是css类的名称。类绑定的语法如下：
v-bind:“{classtoggle:variable}”

所以你应该写：

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


点击

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

希望这会有所帮助，
在您的单击处理程序中，您正在尝试切换可用的
变量，该变量实际上是您的css类的名称。类绑定的语法如下：
v-bind:“{classtoggle:variable}”

所以你应该写：

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


点击

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

希望有帮助