element按钮默认选中状态

需求是某一个页面内有两个按钮，两个按钮分别显示不同的内容，打开页面默认第一个按钮是选中状态

技术栈：Vue3

实现思路，通过v-if动态切换选中和未选中两种状态的按钮
我们可以通过element按钮中的朴素状态为未选中

同时为两个按钮绑定共同的@click函数，传入不同的实参用于切换对应的页面

默认情况下按钮1的v-if绑定的value值为ture，而朴素状态的按钮1的v-if值为false
同时按钮2的v-if绑定的value值为false，而朴素状态的按钮2的v-if值为true

同时，如果点击按钮1，那么四个按钮的状态都不会发生改变

如果点击按钮2，那么四个按钮的状态都会切换成相反值

即，点击按钮2，按钮1的v-if绑定的value值变为fasle，而朴素状态的按钮1的v-if值为true，同时按钮2的v-if绑定的value值为true，而朴素状态的按钮2的v-if值为false

实现代码：

<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
	}
			

实现效果：