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)


相关推荐

  • 论物联网与大数据、云计算、工业物联网、区块链「建议收藏」

    论物联网与大数据、云计算、工业物联网、区块链「建议收藏」论物联网与大数据、云计算、工业物联网、区块链我们当今的时代飞速发展,物联网、大数据、云计算这些名词在我们的生活中出现的越来越频繁,看似高大上的三者其实却和我们的生活息息相关。本篇文章就物联网、大数据以及云计算对三者之间的关系以及应用进行描述。工业物联网和区块链也进行了介绍。(一)物联网(1)什么是物联网物联网(InternetofThings,简称IoT)是指通过各种信息传感器、射频识别技术、全球定位系统、红外感应器、激光扫描器等各种装置与技术,实时采集任何需要监控、连接、互动的物体或过程,采

  • mysql数据库批量插百万数据_sql数据库怎样批量添加数据

    mysql数据库批量插百万数据_sql数据库怎样批量添加数据DELIMITER$DROPPROCEDUREifEXISTSpro_batch_insert$CREATEPROCEDUREpro_batch_insert(INinsert_numINT)BEGINDECLAREiINTDEFAULT1;WHILEi<=insert_numDOINSERTINTOadmin(username,`password`)VALUES(CONCAT(‘Rose’,i),’666′);.

  • Android mtk_Android开发app

    Android mtk_Android开发appstaticstructSET_PD_BLOCK_INFO_Timgsensor_pd_info_1920_1080={ .i4OffsetX =16,//xoffsetofPDarea .i4OffsetY =12,//yoffsetofPDarea .i4PitchX =16,//xpitch/widthofaPDblock .i4PitchY =16,//ypitch/heightofaPDblock .i

  • 锂电池管理芯片_锂电池充放电一体芯片

    锂电池管理芯片_锂电池充放电一体芯片‍FS4001‍4.2/4.354.25-10线性降压充电。FS406‍28.4/8.7/8.8/12.6/13.25开关升压充电。FS40‍08A4.2/8.4/12.69-23开关降压充电。FS406‍38.45-9自适应自适应5V升压和9V降压充电。FS40564.2/4.354.25-6.5线性降压充电。FS40674.2/4.354.25-24线性降压充电。FS40664.2/4.354.25-24线性降压充电。…

  • 母版页中ContentPlaceHolder 控件的作用

    母版页中ContentPlaceHolder 控件的作用文章转自http://wenku.baidu.com/link?url=7sLN0ihgZQ1XfX47b_y8qbpIVjS5T75Q1xvaoyIQ6OiKIgvzyVyRccnU9e9fqoOm4DBTxNyPPIpgGlq8n5l4cePZngx1J-va9PNFmdRn2se母版页中ContentPlaceHolder控件的作用。当母版页被一个页面引用时,页面内容…

  • 网站备案是域名备案还是服务器备案(域名备案一定要服务器吗)

    网站域名服务器怎么备案内容精选换一换WordPress简称WP,最初是一款博客系统,后逐步演化成一款免费的CMS(内容管理系统/建站系统)。本文档指导用户使用华为云市场镜像“Wordpress官方正式版”部署WordPress博客系统。已购买虚拟私有云和弹性公网IP。如果规划为网站配置域名,需已经购买好相应的域名。弹性云服务器所在安全组添加了如表1所示的安全组规则,具体步骤空壳网站指备案主体已在…

发表回复

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

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