Vueで表示・非表示を切り替えた際のソースコードの変化

auです。

Vueで表示・非表示を変更するオプションで「v-show」があります。

これは、TrueとFalseを設定することで利用することができます。

<button @click="changeHidden()">表示切り替え</button>
<div v-show="hidden">
  <h1>表示中</h1>
</div>

export default {
  methods: {
    changeHidden () {
      if (this.hidden === true) {
        this.hidden = false
        return 0
      }
      this.hidden = true
    }
  }
}

ディベロッパーツールのソースはどう変化するか

表示中

非表示中

結論

cssに「display: none;」が追加される