1、vue 选中或点击输入框，边框高亮

①：输入框动态绑定一个class，例login-box-focus，如下：

:class="{ 'login-box-focus': loginBoxIsTrue }"

②：输入框添加一个聚焦（focus）及失焦（blur）事件，如下：

@focus="focusUserName()"
@blur="blurUserName()"

③：data给个默认参数及值，例如loginBoxIstrue，用来绑定到class，如下：

data() {
 return {
    loginBoxIstrue: false,
  };
},

④：事件操作loginBoxIstrue，如下：

focusUserName() {
  this.loginBoxIstrue = true;
},
blurUserName() {
  this.loginBoxIstrue = false;
},

⑤：给第一步的class→login-box-focus写需要的样式
如下：

.login-box-focus {
  width: 340px;
  height: 33px;
  background: url("./inputFocus.png") no-repeat 0 0;
  background-size: 340px 33px;
  display: flex;
}

2、vue 选中或点击元素，当前元素背景高亮

①：元素动态绑定一个class，例activeClass，如下：

:class="{ activeClass: active == item.enterpriseName}"

②：data给个默认参数及值，例如active，用来绑定到class，如下：

data(){
     return{
         active:'',
     }
 },

③：元素添加一个鼠标左键抬起（mouseup）事件，如下：

selected(name){
	this.active = name;
}

④：事件需传参，判断参数是否等于v-for遍历到的元素，完整写法例下：

<div 
	:class="{ activeClass: active == item.enterpriseName}" 
	v-for="(item,index) in businessSearchList" 
	:key="index" 
	@mouseup="selected(item.enterpriseName)" >
</div>

⑤：给第一步的class→active写需要的样式
如下：

.activeClass{
  background: rgba(59, 90, 173, 0.4);
}

这篇文章对你有帮助吗？作为一名前端开发工程师，在评论区留下你的困惑或你的见解，大家可以一起来交流哟 ~