关于vue.js:vue点击获取当前元素

1.开发环境 vue
2.电脑系统 windows10专业版
3.在开发的过程中,咱们常常会进行一些款式的操作,然而又不想应用原生的办法获取元素,上面我来分享一下我的解决办法,心愿对你有所帮忙。
4.需要:在点击按钮,奇数次的时候背景色为红色,偶数次的时候背景色为红色,上面我剖析一下如何实现,废话不多说,间接上代码:

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

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

<p v-for="(sitem,sindex) in $cJs.stringarr(item.support_amount_range)"
 :key="sindex" 
 v-if="item.name!='网银转卡'"
 @click="selecttopup($event)">
{{sitem}}</p>

//要害代码为: 
@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.本期的分享到了这里就完结啦,心愿对你有所帮忙,让咱们一起致力走向巅峰。