Скрытие и появление классов по нажатию на кнопку

Question

Как сделать так , чтобы когда я нажимал на на список , у меня исчезал предыдущий элемент, а появлялся новый ?

new Vue({
   el: '#app',
   data() {
     return {
      statsshow: true,
      works: false,
      requests: false
     }
   }
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
      <div class="header">
         <ul class="list">
            <li class="list-item" v-on:click="statsshow = !statsshow" >Статистика</li>
            <li class="list-item" v-on:click="works = !works">Робота</li>
            <li class="list-item" v-on:click="requests = !requests">Запрос</li>
         </ul>
      </div>
      <div class="wrapper">
         <div class="stats" v-if="statsshow">
            text1
         </div>
         <div class="work" v-if="works"> 
            text2
         </div>
         <div class="request" v-if="requests">
            text3
         </div>
      </div>
   </div>

Answer 1

Самый простой способ - создать переменную, которая будет содержать ключ нажатого элемента из списка и по нему выводить определенный блок, используя условный рендеринг:

new Vue({
  el: '#app',
  data() {
    return {
      activeKey: 'statsshow',
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div class="header">
    <ul class="list">
      <li class="list-item" v-on:click="activeKey = 'statsshow'">Статистика</li>
      <li class="list-item" v-on:click="activeKey = 'works'">Робота</li>
      <li class="list-item" v-on:click="activeKey = 'requests'">Запрос</li>
    </ul>
  </div>
  <div class="wrapper">
    <div class="stats" v-if="activeKey == 'statsshow'">
      text1
    </div>
    <div class="work" v-else-if="activeKey == 'works'">
      text2
    </div>
    <div class="request" v-else-if="activeKey == 'requests'">
      text3
    </div>
  </div>
</div>

БЛОГ НА HUSL

Скрытие и появление классов по нажатию на кнопку

Ответы (1 шт):