Vue在列表中绑定点击事件后的处理方法

问题描述:使用Vue框架渲染了一个列表,当列表中存在点击事件时,怎么才能获取到类似于jQuery的$(this)的方式获取元素呢?)

1.查询Vue教程可知,事件处理器,因为在Vue中this指向的是Vue本身,所以可以通过在绑定点击事件是传入$event

<div id="example-2">
  <!-- `greet` 是在下面定义的方法名 -->
  <button v-on:click="greet($event)">Greet</button>
</div>

var example2 = new Vue({
  el: '#example-2',
  data: {
    name: 'Vue.js'
  },
  // 在 `methods` 对象中定义方法
  methods: {
    greet: function (event) {
      // `this` 在方法里指当前 Vue 实例
      alert('Hello ' + this.name + '!')
      // `event` 是原生 DOM 事件
      if (event) {
        alert(event.target.tagName)
      }
    }
  }
})
// 也可以用 JavaScript 直接调用方法
example2.greet() // -> 'Hello Vue.js!'

2.值得一提的是,这里的event是原生DOM事件,所以使用jQuery来操作DOM是不可能了,因此去查询原生DOM事件,参考常见的原生javascript DOM操作
注意1:在进行属性操作的过程中碰到了一个很抠脚的问题,在进行属性操作时,如setAttribute/removeAttribute进行类的添加和删除时,该方法会将所有的class都替换掉,这个真的很抠脚啊
注意2:使用过程中还用到了判断是否包含某个类名时,可以使用hasClass().indexOf(‘类名’)或者node.className.indexOf(‘类名’)进行判断。

3.原生DOM事件event中包含了currentTarget和target,这两个事件即可进行元素之间的操作

恩,大概就这么多吧,不懂的可以来问,gogogogo。。。

  • 9
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值