Αντικειμενική Προϋπόθεση στο Vue

Ας κάνουμε την προϋπόθεση αντικειμενική. Για παράδειγμα, ας κάνουμε ένα στοιχείο να κρύβεται με κλικ σε ένα κουμπί. Ας υποθέσουμε ότι έχουμε την ακόλουθη παράγραφο:

<template>
	<p v-if="visible">κείμενο</p>
</template>

Ας κάνουμε την παράγραφό μας να εμφανίζεται αρχικά:

data() {
	return {
		visible: true,
	}
}

Ας φτιάξουμε τώρα ένα κουμπί, που upon clicking θα κρύβει την παράγραφο:

<template>
	<button @click="hide">κρύψε</button>
	<p v-if="visible">κείμενο</p>
</template>

Η δεσμευμένη μέθοδος θα αλλάζει την ιδιότητα visible σε false, εξαναγκάζοντας έτσι την παράγραφό μας να κρυφτεί:

methods: {
	hide: function() {
		this.visible = false;
	}
}

Δίνεται μια παράγραφος και ένα κουμπί. Αφήστε την παράγραφο αρχικά κρυμμένη. Φτιάξτε ένα κουμπί, που θα εμφανίζει την παράγραφο.

Δίνονται μια παράγραφος και δύο κουμπιά. Αφήστε το πρώτο κουμπί να εμφανίζει την παράγραφο, και το δεύτερο - να την κρύβει.

Τροποποιήστε την προηγούμενη εργασία έτσι ώστε στην οθόνη να είναι πάντα ορατό μόνο ένα από τα κουμπιά: εάν η παράγραφος εμφανίζεται, τότε το κουμπί για απόκρυψη, και εάν είναι κρυμμένη - τότε το κουμπί για εμφάνιση.