element按钮默认选中状态

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

技术栈&＃xff1a;Vue3

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

同时为两个按钮绑定共同的&＃64;click函数&＃xff0c;传入不同的实参用于切换对应的页面

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

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

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

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

实现代码&＃xff1a;

<div class&＃61;"button">
<el-button type&＃61;"primary" v-if&＃61;"button1" &＃64;click&＃61;"changebutton(1)">按钮1el-button><el-button type&＃61;"primary" v-if&＃61;"button1plain" plain &＃64;click&＃61;"changebutton(1)">按钮1el-button>
div>
<div class&＃61;"button">
<el-button type&＃61;"primary" plain v-if&＃61;"button2plain" &＃64;click&＃61;"changebutton(2)">按钮2el-button><el-button type&＃61;"primary" v-if&＃61;"button2" &＃64;click&＃61;"changebutton(2)">按钮2el-button>div>


//v-if不同状态
const button1&＃61; ref(true)
const button1plain&＃61; ref(false)
const button2plain&＃61; ref(true)
const button2&＃61; ref(false)const changebutton&＃61; (item) &＃61;> {
//点击按钮1if (item &＃61;&＃61; 1) {button1.value &＃61; truebutton1plain.value &＃61; falsebutton2.value &＃61; falsebutton2plain.value &＃61; true}//点击按钮2if (item &＃61;&＃61; 2) {button1.value &＃61; falsebutton1plain.value &＃61; truebutton2.value &＃61; truebutton2plain.value &＃61; false}

实现效果&＃xff1a;