ES6中的模板字符串改变html_vue事件绑定修饰符

ES6中的模板字符串改变html_vue事件绑定修饰符step1:模板字符传中写法renderDom(){return`<divdata-action=”goDetail”data-url=”${item.clickUrl}”class=”uliao-news-item”><h1>${item.title}</h1>&…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

step1: 模板字符传中写法

renderDom() {
        return `
        <div data-action="goDetail" data-url="${item.clickUrl}" class="uliao-news-item">
            <h1>${item.title}</h1>
        </div>
        `;
}

 

step2: 这里我使用es6 事件委托的方式

class ULiaoNews {

    constructor(elem) {
        elem.onclick = this.onClick.bind(this);
    }

}

step3:事件执行

这里进行了判断 只有在指定的dom上才可执行 不然无法获取到dataset参数

onClick(event) {
        let closest = event.target.closest('.uliao-news-item');
        if (closest) {
            let action = closest.dataset.action;
            this[action](closest.dataset.url);//执行下面的跳转函数
        } 
    }

 goDetail(url) {
        location.href = url;
    }

参考文章:http://javascript.info/event-delegation

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/171847.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • Android Studio如何实现音乐播放器(简单易上手)

    Android Studio如何实现音乐播放器(简单易上手)我们大家平时长时间打代码的时候肯定会感到疲惫和乏味,这个时候一边播放自己喜欢的音乐,一边继续打代码,心情自然也愉快很多。音乐带给人的听觉享受是无可比拟的,动听的音乐可以愉悦人的身心,让人更加积极地去热爱生活。大家平常应该会用QQ音乐、网易云音乐或者酷狗音乐等音乐APP来听歌,想不想拥有属于自己的音乐播放器。那么接下来就教大家如何用AndroidStudio自己制作一个音乐播放器APP。

  • linux下java的环境配置

    linux下java的环境配置linux下java的环境配置文章目录linux下java的环境配置1.删除原有的java环境2.去官网下载相应的Java环境3.在Linux上进行解压4.修改~/.bashrc参考链接之前在大数据配置hadoop开发环境的时候,进行了相关的配置,所以还有印象,接下来对虚拟机ubuntu进行java的环境配置1.删除原有的java环境2.去官网下载相应的Java环境我用的是java8的环境,比较经典,另外还有java11也是比较稳定的,相较于java8做了一些改进3.在Linux上进行解

  • HashMap遍历的五种方法「建议收藏」

    HashMap遍历的五种方法「建议收藏」HashMap遍历的五种方法

  • oracle并非所有变量都已绑定

    oracle并非所有变量都已绑定给Model中变量赋初始值就OK了。

  • linux基础50——ldd

    linux基础50——ldd1.概念ldd命令用于打印程序或者共享库文件所依赖的共享库列表。注意,ldd本身不是一个二进制程序,而是一个Shell脚本,使用文本编辑器vim可以查看其内容,具体目录可以使用which命令查看:[root@192pthread]#whichldd/usr/bin/ldd我们知道,Linux的动态库装载器ld-linux.so模块会先于executable模块工作,并获得控制权,ld-linux.so会通过系统环境变量的设置,选择只显示可执行模块的d

  • 运算放大器工作原理

    运算放大器工作原理运算放大器工作原理作者:何富和时间:2015-03-22来源:电子产品世界  运算放大器基本上可以算得上是模拟电路的基本需要了解的电路之一,而要想更好用好运放,透彻地了解运算放大器工作原理是无可避免,但是运放攻略太多,那不妨来试试这篇用电路图作为主线的文章来带你领略运算放大器的工作原理吧。本文引用地址:http://www.eepw.com.cn/article/271351.htm1.运算放

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号