简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > interface Web > js tutoriel > le corps du texte

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

亚连
Libérer： 2018-06-07 11:14:01
original
5296 Les gens l'ont consulté

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>
Copier après la connexion

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!

Étiquettes associées：
vue.js 显示 cliquez sur le bouton 隐藏
source：php.cn
Article précédent：Comment empêcher les événements de clic de bouillonner dans vue Article suivant：Comment faire fonctionner la requête ajax et le package axios
Déclaration de ce site Web
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
Derniers articles par auteur
Derniers numéros
Comment lier le v-model aux méthodes dans Vue.js J'apprends vuejs(3). J'ai cette boucle : <trv-for="indexin7":key="index&...
Depuis 2023-11-05 16:36:26
0
1
193
Problèmes avec Vue.js 3 et Pinia Getters Je passe d'Angular à Vue.js et j'essaie de comprendre son architecture. Je suis actuelleme...
Depuis 2023-11-03 18:52:56
0
1
244
Créez des boutons personnalisés pour la navigation dans les diapositives dans Swiper à l'aide de Vue.js Je dois supprimer la navigation par défaut (nextEl, prevEl) et faire défiler le bouton ave...
Depuis 2023-11-02 14:42:51
0
1
174
Vue.js 3 v-for provoque des problèmes avec la fonctionnalité modale Tailwind/Flowbite J'essaie d'appeler un modèle tailwind à partir d'une table où les lignes sont générées à l...
Depuis 2023-11-02 13:36:09
0
1
300
Comment déclarer les données du tableau d'objets dans vue.js + typescript J'ai ce code dans vue.js3+typescript, je veux juste déclarer un tableau d'objets dans les ...
Depuis 2023-11-02 12:50:34
0
1
280
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！