vue的点击高亮，再次点击取消高亮

最新推荐文章于 2023-07-03 15:32:52 发布

xiaofeilian

最新推荐文章于 2023-07-03 15:32:52 发布

阅读量1.3k

点赞数 1

文章标签： javascript ecmascript vue.js

本文链接：https://blog.csdn.net/xiaofeilian/article/details/127512113

版权

需求是需要控制一个button按钮的高亮与否来控制两个事件的发生，直接上代码：

我这个是比较笨的方法：

<button v-bind:[name]='zoomRangingToolOn' @click="zoomRangingOn">测距</button>

然后在data中直接初始化name:

name: 'class',
zoomRangingToolOn: 'zoomRangingToolOn'

最后也就是最重要的方法,在method中直接写方法:

zoomRangingOn() {
      if(this.name == 'class') {
        this.name = 'id';
        //这里就是高亮之后可以写你想要触发的事件
      }else if(this.name == 'id') {
        this.name = 'class';
        //这里就是取消高亮之后你想要触发的事件
      }
    },