elementUI按钮组三元运算符设置样式

最新推荐文章于 2024-05-06 21:51:47 发布

MFG_666

最新推荐文章于 2024-05-06 21:51:47 发布

阅读量1.3k

点赞数 1

分类专栏： vue 文章标签： elementui 前端 javascript

本文链接：https://blog.csdn.net/m0_49714202/article/details/121923312

版权

vue 专栏收录该内容

124 篇文章 8 订阅

订阅专栏

这个博客展示了如何在Vue.js中创建一个包含‘待选’和‘已选’状态的按钮组。通过点击按钮，状态会在1（待选）和2（已选）之间切换，改变按钮的样式。利用`:class`指令动态绑定类名，实现按钮的高亮效果。代码简洁明了，适用于前端界面状态控制的场景。

摘要由CSDN通过智能技术生成

<el-button-group>
		<el-button size="small" @click="notSelect()" :class="[status == 1?'isActive':'']" autofocus="true" v-focus plain>待选</el-button>
		<el-button size="small" @click="selected()"  :class="[status==2?'isActive':'']" plain>已选</el-button>
 </el-button-group>
 <script>
   
data(){
		return{
			status:1
		}
	},

	methods: { 
		//待选 
		notSelect(){
			this.status = 1
		},
		//已选
		selected(){
			this.status = 2
		},
	},
</script>

<style scoped>
.isActive {
  color: #409eff;
  border-color: #409eff;
}
</style>