質問: ### 背景 Vue.jsの学習中です。「基礎から学ぶVue.js」という本で勉強していますが、`v-show`でボタンをクリックすると要素が表示・非表示する部分の文法が分からなくて質問させていただきます。 ### 質問 以下、`button`をクリックすることで「Hello Vue.js」の文字の表示・非表示が切り替わるサンプルコードです。 ここで、Vueインスタンス内のdataの`show`のtrue、falseが切り替わることによって、「Hello Vue.js」の文字の表示・非表示が切り替わる理屈は理解できたのですが、`button`タグにある式`show=!show`という記法により、なぜtrueとfalseがトグルするのか?という理屈が理解できません。 この理屈を、簡単に教えていただけないでしょうか? ``` 切り替え Hello Vue.js! ``` ``` new Vue({ el: '#app', data: { show: true } }) ```
回答: 意味をわかりやすく区切ってみると、`show = (!show)`となります。 `!`は、あとに続くものを論理否定する演算子です(MDN)。`show`が`true`なら`!show`は`false`に、逆に`show`が`false`なら`!show`は`true`になります。 あとは、出来上がった値を`=`で代入するだけです。