vue+ element 三元运算符设置按钮样式

最新推荐文章于 2023-12-20 09:16:39 发布

Zh.冠军

最新推荐文章于 2023-12-20 09:16:39 发布

阅读量1.3k

点赞数

分类专栏： element 文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_38673922/article/details/114592735

版权

element 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

效果图

代码块

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


	data(){
		return{
			status:1
		}
	}

	methods: { 
		//待选 
		notSelect(){
			this.status = 1
		},
		//已选
		selected(){
			this.status = 2
		},
	},
	directives: {
	  focus: {
		inserted: function(el) {
		  el.focus();
		}
	  }
	},	

	.isActive{
		color: #409EFF;
		border-color: #409eff;
	}