vxe-vxe-toolbar中vxe-button选中切换status

本文主要是介绍vxe-vxe-toolbar中vxe-button选中切换status，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1.VXE-Toolbar

        在VXE-Toolbar中，可以使用vxe-button组件实现按钮的选中切换效果，并且可以根据不同的选中状态显示不同的样式。你可以通过设置status属性来控制按钮的选中状态，并通过监听按钮的点击事件来切换选中状态。需要在vxe-toolbar中添加多个vxe-button组件，并为每个按钮设置一个唯一的标识符（例如：button1、button2、button3等）。

2.代码

<template><div><vxe-toolbar><vxe-button :status="button1 ? 'primary' : ''" @click="toggleButton('button1')">按钮1</vxe-button><vxe-button :status="button2 ? 'primary' : ''" @click="toggleButton('button2')">按钮2</vxe-button><vxe-button :status="button3 ? 'primary' : ''" @click="toggleButton('button3')">按钮3</vxe-button></vxe-toolbar></div>
</template><script>
export default {data() {return {button1: false,button2: false,button3: false};},methods: {toggleButton(button) {this[button] = !this[button];}}
};
</script>

这篇关于vxe-vxe-toolbar中vxe-button选中切换status的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---