vue选中或点击输入框，边框高亮；vue选中或点击元素，当前元素背景高亮

水深无声 2022-10-28 03:43 570阅读 0赞

**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);
    }

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

发表评论取消回复

表情：

评论列表（有 0 条评论，570人围观）

还没有评论，来说两句吧...

相关阅读

相关 jquery 点击按钮,多选同一按钮第一次点击高亮第二次取消高亮，和单选实现点击后当前背景高亮效果其余正常

query代码 <script type="text/javascript" src="../js/jquery-1.9.1.js"></script> ...

ゝ一世哀愁。/ 2024年04月19日 15:37/ 0 赞/ 100 阅读

相关 vue选中点击的元素_用vue2.0实现点击选中active，其他选项互斥的效果

在正常的js中。我们如果要实现点击选中active然后其他取消的效果，我们可以定义一个类，当点击的时候给给多有的dom取消active的类，给当前元素加上这个类名，说的很啰嗦，

小咪咪/ 2023年01月01日 05:58/ 0 赞/ 163 阅读

相关 vue选中或点击输入框，边框高亮；vue选中或点击元素，当前元素背景高亮

1、vue 选中或点击输入框，边框高亮 ①：输入框动态绑定一个class，例`login-box-focus`，如下： :class="{ 'login-box-f

水深无声/ 2022年10月28日 03:43/ 0 赞/ 571 阅读

相关 vue3 element-plus 右键菜单点击高亮选中树节点

关键在于必须设置tree属性： > ref="treeRef" > node-key="sucNormCode" >

蔚落/ 2022年09月16日 11:27/ 0 赞/ 1229 阅读

相关 JointJS点击选中元素高亮显示

使用 JointJs 时，当我们点击了选中的元素时，如果我们需要对点击元素高亮显示，点击空白处取消高亮显示的话，可以继续往下看代码实现。官方文档相关部分： [highl

心已赠人/ 2022年08月31日 12:23/ 0 赞/ 263 阅读

相关 vue结合Echarts实现点击高亮效果

vue结合Echarts实现点击高亮效果本文主要介绍如何在vue中使用Echarts实现点击高亮效果。 1、首先看一下官方网站上的介绍： http://echart

野性酷女/ 2022年06月05日 12:27/ 0 赞/ 621 阅读

相关 iOS UIView点击高亮效果

模范UIbuton的高亮效果，代码如下： ViewClickEffect.h import <UIKit/UIKit.h> @interface

骑猪看日落/ 2022年06月05日 03:43/ 0 赞/ 449 阅读

相关 vue按钮高亮，添加类，点击高亮，路由router高亮linkExactActiveClass（多种方法实现）...

vue样式高亮使用vue/cli3脚手架创建一个有router路由的项目,并且运行该项目 vue create 'project-name' cnpm

╰+哭是因爲堅強的太久メ/ 2022年03月12日 07:40/ 0 赞/ 699 阅读

相关 vue循环与判断(点击高亮)

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXh

不念不忘少年蓝@/ 2022年02月14日 02:23/ 0 赞/ 460 阅读

相关 vue 的点击事件怎么获取当前点击的元素

首先 vue的点击事件是用 @click = “clickfun()” 属性在html中绑定的, 在点击的函数中添加$event 参数就可以比

￡神魔★判官ぃ/ 2021年11月02日 07:44/ 0 赞/ 768 阅读