Im Folgenden werde ich Ihnen einen Beispielcode für das Anzeigen/Ausblenden von Inhalten durch Vue.js mitteilen, der einen guten Referenzwert hat und ich hoffe, dass er für alle hilfreich ist.
Beispielcode:
<!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>Das Obige habe ich für Sie zusammengestellt. Ich hoffe, es wird Ihnen in Zukunft hilfreich sein.
Verwandte Artikel:
Verwendung von vue2.0 .js, um mehrere kaskadierende Selektoren zu realisieren
Vergleichen Sie die Uhrzeit desselben Tages mit JavaScript
Das obige ist der detaillierte Inhalt vonKlicken Sie auf die Schaltfläche von Vue.js, um den Inhalt anzuzeigen/auszublenden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
