Vue在列表中绑定点击事件后的处理方法
来源:互联网 发布:人工智能研究热点 编辑:程序博客网 时间:2024/05/21 06:42
问题描述:使用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
- Vue在列表中绑定点击事件后的处理方法
- vue绑定点击事件
- vue绑定的点击事件阻止冒泡
- 关于iPhone的点击事件绑定无效的处理方法
- vue 事件绑定 处理-
- Angularjs中使用指令绑定点击事件的方法
- vue.js怎样移除绑定的点击事件?
- jq 后绑定点击事件
- vue中键盘事件的处理
- vue的属性绑定(在引号中绑定)
- Android列表动态绑定按钮点击事件
- Button点击事件绑定中如何传递带参数的方法
- .NET WinForms中点击窗体右上角的关闭按钮后的事件处理
- vue中如何在v-for中动态的使用将index拼接字符串后绑定id属性
- vue2.x---vue-router如何在router-link标签绑定click点击事件、keyup、change等事件
- Android如何处理列表控件的item同时点击事件
- ContextMenuStrip在点击事件里,获取绑定的控件源
- siebel 在list applet 的列上绑定点击事件
- POJ
- Android ImageView
- 474. Ones and Zeroes
- 统一异常处理@ExceptionHandler
- 数组
- Vue在列表中绑定点击事件后的处理方法
- 编程范式
- 嵌入式学习7(time()函数的两种用法)
- 大流量场景下统计问题整理
- 关于Centos 7 下如何安装FTP服务
- Oracle根据多个字段进行查重
- Exception in thread "main" org.apache.spark.SparkException: Application application_1498149692663_01
- HTML&CSS基础篇之五:HTML网页创建流程
- 【数据库SQL实战】找出所有员工当前具体的薪水情况