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

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

亚连

Freigeben： 2018-06-07 11:14:01

Original

5365 Leute haben es durchsucht

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>

Nach dem Login kopieren

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!