Я пытаюсь использовать этот простой код для переключения класса с помощью события 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 изначально будет зеленым, но после нажатия станет красным.

В вашем обработчике щелчка вы пытаетесь переключить available переменную, которая на самом деле является именем вашего css-класса. Синтаксис для привязки к классу следующий: v-bind:"{classtotoggle: variable}" .

Итак, вы должны были написать:

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

В качестве совета я бы всегда использовал функцию для обработки события ( v-on директива), это упрощает добавление поведения в будущем.

Надеюсь, это поможет,

Вы должны переключать, value щелкнув 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>