Как сделать Vue.js кнопку переключатель?

Question

[TheSerKat]

Есть кнопка и 2 div ( у одного display:none). При нажатии на кнопку, текст у кнопки меняется и тот div который был спрятан появляется, а тот div который был по дефолту виден, исчезает. При повторном клике, все сначала, как было. Вот как сделать такую кнопку - переключатель?

<v-btn
class="classbtn"
id="idbtn"
v-on:click="docmarket"
dark
v-on="on"
>
Text btn1
</v-btn>
<div class="documents">
<div class="market"> <!-- display: none -->

Answer 1

[Тигран Абрамян]

https://jsfiddle.net/ud6qn2j4/

<div id="app">
  <button @click="isShowText">click</button>
  <div class="documents" v-if="!isShow1">
    show 1
  </div>
  <div class="market" v-if="isShow2">
    show 2
  </div>
</div>

data: {
  isShow1: false,
  isShow2: false
},
methods: {
  isShowText() {
    this.isShow1 = !this.isShow1;
    this.isShow2 = !this.isShow2;
  }
}

Comments

[TheSerKat]

Спасибо. А как переключать текст внутри button? click 1 -> click 2 и обратно

[Тигран Абрамян]

TheSerKat, Самый простой способ.

[TheSerKat]

TAbrahamyan, Огромное спасибо!