Heim > Artikel > Web-Frontend > Klicken Sie auf die Schaltfläche von Vue.js, um den Inhalt anzuzeigen/auszublenden

Klicken Sie auf die Schaltfläche von Vue.js, um den Inhalt anzuzeigen/auszublenden

亚连Original: 2018-06-07 11:14:015362Durchsuche

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 mint-ui zur Realisierung des dreistufigen Verknüpfungseffekts von Provinzen und Gemeinden

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So verhindern Sie, dass Klickereignisse in Vue sprudelnNächster Artikel：So verhindern Sie, dass Klickereignisse in Vue sprudeln

In Verbindung stehende Artikel

Mehr sehen