Le bouton de l'élément est sélectionné par défaut

L'exigence est qu'il y ait deux boutons dans une certaine page , et les deux boutons affichent respectivement un contenu différent. Lorsque la page est ouverte, le premier bouton est sélectionné par défaut.

Pile technologique : Vue3

Pour concrétiser l'idée, en v-ifbasculant dynamiquement les boutons dans les deux états de sélectionné et non sélectionné,
on peut utiliser l'état simple de l'élément bouton à désélectionner

et lier une fonction commune aux deux boutons en même temps , et@click passer dans différents paramètres réels pour changer la page correspondante

Par défaut, la valeur de la liaison du bouton 1 est vraie, tandis que la valeur du bouton 1 à l'état brut est fausse et la valeur de la liaison du bouton 2 est fausse, tandis que la valeur du bouton 2 à l'état brut est vraiev-ifv-if
v-ifv-if

En même temps, si le bouton 1 est cliqué , l'état des quatre boutons ne changera pas

Si le bouton 2 est cliqué , l'état des quatre boutons passera à la valeur opposée

Autrement dit, lorsque le bouton 2 est cliqué , la valeur liée du bouton 1 devient fasle, tandis que la valeur du bouton 1 à l'état brut est vraie, et la valeur liée du bouton 2 est vraie, tandis que la valeur du bouton 2 à l'état brut est FAUXv-ifv-ifv-ifv-if

Code d'implémentation :

<div class="button">
<!-- 默认情况下按钮1的`v-if`绑定的value值为ture，而朴素状态的按钮1的`v-if`值为false -->
	<el-button type="primary" v-if="button1"  @click="changebutton(1)">按钮1</el-button>
	<el-button type="primary" v-if="button1plain" plain @click="changebutton(1)">按钮1</el-button>
</div>
<div class="button">
<!-- 按钮2的`v-if`绑定的value值为false，而朴素状态的按钮2的`v-if`值为true -->
	<el-button type="primary" plain v-if="button2plain" @click="changebutton(2)">按钮2</el-button>
	<el-button type="primary" v-if="button2" @click="changebutton(2)">按钮2</el-button>
	</div>

//v-if不同状态
const button1= ref(true)
const button1plain= ref(false)
const button2plain= ref(true)
const button2= ref(false)

const changebutton= (item) => {
    
    
//点击按钮1
	if (item == 1) {
    
    
	button1.value = true
	button1plain.value = false
	button2.value = false
	button2plain.value = true
	}
	//点击按钮2
	if (item == 2) {
    
    
	button1.value = false
	button1plain.value = true
	button2.value = true
	button2plain.value = false
	}
			

Réalisez l'effet: