需求是某一个页面内有两个按钮,两个按钮分别显示不同的内容,打开页面默认第一个按钮是选中状态
技术栈: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
}
实现效果: