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

小咪咪 2023-01-01 05:58 157阅读 0赞

在正常的js中。我们如果要实现点击选中active然后其他取消的效果，我们可以定义一个类，当点击的时候给给多有的dom取消active的类，给当前元素加上这个类名，说的很啰嗦，直接来看代码说话吧(表示楼主用的是jq):

\* \{

margin: 0;

padding: 0;

\}

li \{

list-style: none;

width: 100px;

margin-top: 10px;

border: 1px solid red;

\}

li:active \{

cursor: pointer;

\}

.active \{

background-color: aqua;

\}

*  this is pne
 *  this is two
 *  this is three

$(() => \{

$("li").click((e) => \{

$("li").removeClass("active");

$(e.target).addClass("active");

\})

\})

效果如下图所示：

![Image 1][]

但是在vue里面，是不提倡进行dom操作的，如果非进行dom的话，vue2.0里面有一个ref的属性，是可以达到dom的效果的。那么接下来我们不接住dom来进行操作：

由于习惯了webpack和vue-cli脚手架，所以楼主所有vue的代码都是放在webpack的脚手架当中进行，还使用了pug和scss的预处理器，vue的代码如下：

ul

li(v-for="(item,index) in classArr", @click="result(index)", :class="resultNum === index?'active':''") this is \{ \{item\}\}

li \{

list-style: none;

width: 100px;

margin-top: 10px;

border: 1px solid red;

&:hover \{

cursor: pointer;

\}

\}

.active\{

background-color: aqua;

\}

export default\{

data()\{

return \{

classArr: \["one", "two", "three"\],

num:"",

\}

\},

methods: \{

result(index)\{

this.num = index;

\}

\},

computed:\{

resultNum()\{

return this.num;

\}

\}

\}

思路如下：

这段代码使用的是index这个关键字，还使用了computed这个计算属性，当当前的index索引与点击的当前元素的下标相同的时候，便会触发active这个类名。说的很简练，不懂的可以加博主一起探讨

[Image 1]:

发表评论取消回复

表情：

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

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

相关阅读

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

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

缺乏、安全感/ 2023年06月15日 09:54/ 0 赞/ 40 阅读

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

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

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

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

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

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

相关 vue 非必填项单选点击一下选中再次点击取消

<el-form-item label="标段异常状态" prop="biddingState"> <el-radio-group v-mode

偏执的太偏执、/ 2022年10月11日 00:54/ 0 赞/ 286 阅读

相关 CSS模糊效果、禁止点击、Vue获取点击元素

1.在Vue的点击事件中如何获取当前的点击的元素或是当前click事件绑定的元素。首先vue的点击事件是用 @click = “clickfun()” 属性在h

电玩女神/ 2022年10月01日 06:51/ 0 赞/ 254 阅读

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

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

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

相关 js radio点击选中再点击取消

$(function(){ $('input:radio').click(function(){

柔光的暖阳◎/ 2022年06月01日 10:25/ 0 赞/ 437 阅读

相关 jquery checkbox点击选中，再点击取消选中

if(n==1){ if($("abs1").is(':checked')){ $("abs1"

刺骨的言语ヽ痛彻心扉/ 2021年12月04日 06:39/ 0 赞/ 488 阅读

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

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

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

相关选项卡点击多选，再次点击取消选中，选项卡变色（uni)

效果 ![在这里插入图片描述][20201218101530667.png_pic_center] js部分 redio_cli(e,ind){

一时失言乱红尘/ 2021年07月24日 16:03/ 0 赞/ 812 阅读