Maison > Article > interface Web > Vue.js cliquez sur le bouton pour afficher/masquer le contenu
Ci-dessous, je partagerai avec vous un exemple de code de Vue.js affichant/masquant du contenu en cliquant sur un bouton. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.
Exemple de code :
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue点击切换显示隐藏</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> </head> <body> <p id="example"> <button v-text="btnText" @click="showToggle"></button> <p v-show="isShow">原本可以成为Google、Facebook的“爸爸”,或者微软的“儿子”,最后却像“孙子”一样被贱卖,沦为互联网浪潮的“弃子”。</p> </p> <script type="text/javascript"> new Vue({ el:"#example", data:{ btnText:"隐藏", isShow:true }, methods:{ showToggle:function(){ this.isShow = !this.isShow if(this.isShow){ this.btnText = "隐藏" }else{ this.btnText = "显示" } } } }) </script> </body> </html>
Ce qui précède est ce que j'ai compilé pour vous. J'espère qu'il vous sera utile à l'avenir. .
Articles connexes :
Utiliser mint-ui pour réaliser l'effet de liaison à trois niveaux des provinces et des municipalités
Utiliser vue2.0 .js pour réaliser plusieurs sélecteurs en cascade
Comparez l'heure du même jour via JavaScript
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!