Maison  >  Article  >  interface Web  >  Vue.js cliquez sur le bouton pour afficher/masquer le contenu

Vue.js cliquez sur le bouton pour afficher/masquer le contenu

亚连
亚连original
2018-06-07 11:14:015390parcourir

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn