Vue.jsのトグル記法について

Question

背景

Vue.jsの学習中です。「基礎から学ぶVue.js」という本で勉強していますが、v-showでボタンをクリックすると要素が表示・非表示する部分の文法が分からなくて質問させていただきます。

質問

以下、buttonをクリックすることで「Hello Vue.js」の文字の表示・非表示が切り替わるサンプルコードです。
ここで、Vueインスタンス内のdataのshowのtrue、falseが切り替わることによって、「Hello Vue.js」の文字の表示・非表示が切り替わる理屈は理解できたのですが、buttonタグにある式show=!showという記法により、なぜtrueとfalseがトグルするのか？という理屈が理解できません。
この理屈を、簡単に教えていただけないでしょうか？

<div id="app">
    <button v-on:click="show=!show">切り替え</button>
    <p v-show="show">Hello Vue.js!</p>
</div>

new Vue({
    el: '#app',
    data: {
        show: true
    }
})

Answer 1

意味をわかりやすく区切ってみると、show = (!show)となります。

!は、あとに続くものを論理否定する演算子です（MDN）。showがtrueなら!showはfalseに、逆にshowがfalseなら!showはtrueになります。

あとは、出来上がった値を=で代入するだけです。

Comments

[tara-tail]

maisumakunさん、詳しい説明ありがとうございます。まず、イコールが一つなので、これは比較しているのではなく、代入しているのですね。勘違いしていました。
右側の`show`には左側とは反対のものが入っていて、クリックすると左側の`show`に右側の反対のものが代入される。それが繰り返されるので`true`と`false`がトグルされるという理屈ですね。理解できました。