vue点击获取当前元素

1.开发环境 vue
2.电脑系统 windows10专业版
3.在开发的过程中,我们经常会进行一些样式的操作,但是又不想使用原生的方法获取元素,下面我来分享一下我的解决方法,希望对你有所帮助。
4.需求:在点击按钮,奇数次的时候背景色为红色,偶数次的时候背景色为白色,下面我分析一下如何实现,废话不多说,直接上代码:

//在return中定义两个值
selectmoney: {
  // 定义 点击次数
  num: 0,
}

5.在template中添加如下代码:

{{sitem}}

//关键代码为: 
@click="selecttopup($event)"

6.在对应的方法中进行输出:

   selecttopup(e) {
    console.log("我是传进来的e的值");
    console.log(e);
    console.log(e.target);
    console.log("我是传进来的e的值结束啦");
    this.selectmoney.num += 1;
    if (this.selectmoney.num % 2 == 0) {
     console.log("我是偶数的情况");
     console.log(this.selectmoney.num);
     console.log("我是偶数的情况结束啦");
     e.target.style.backgroundColor = "#fff";
    } else {
     console.log("我是奇数的情况");
     console.log(this.selectmoney.num);
     console.log("我是奇数的情况结束啦");
     e.target.style.backgroundColor = "#FED2D6";
    }
   }

//打印传进来的 e
//打印传进来的 e.target 是你当前点击的元素

这样我们在点击的时候的时候就可以获取当前的元素,然后判断几次的次数是偶数还是奇数,进行对应的修改背景色。

7.本期的分享到了这里就结束啦,希望对你有所帮助,让我们一起努力走向巅峰。