vue给标签动态添加元素_动态添加dom元素,并绑定vue事件
背景:后管系统配置一个产品后,前端(vue.js框架)取到这些产品信息并展示出来,产品经理要求在文本内容中添加链接。
例如:
本保险不承保前往处于战争状态或已被宣布为紧急状态的国家或地区,最新信息以登陆http://baoxian.pingan.com/dangerous_zone/war.shtml的查询结果为准。
如果上面内容中是简单的链接跳转,用v-html把上面段内容展示出来即可。
问题关键是,不仅仅是简单的链接,还要有一些逻辑判断,所以要用“动态添加dom元素,并绑定vue事件”
解决办法一:
因为VUE是先编译,后执行,所以元素上的方法要预先绑定。
这是我们定义的VUE组件,放在最外层:
var periodDiv = Vue.extend({
template: "
"Available" +
"
",
methods: {
toLink: function ($event) {
var urlStr = $event.target.getAttribute("data-url").trim();
// 一些复杂的逻辑判断
myApp.doLink(urlStr); // 调用myApp的方法
}
}
});
var myApp= new Vue({
el: "#app",
data: {
book: null
},
mounted () {
var component = new periodDiv().$mount(); // 每次添加需要重新new一个
var $dom = $(component.$el); // 获取动态元素的jquery对象
},
methods: {
doLink: function (url) {
openPdf(url);
},
openPdf () {
let attributes = e.target.getAttributeNames()
if (attributes.includes('pdf-title') && attributes.includes('pdf-url')) {
common.openPDF({title: e.target.getAttribute('pdf-title').trim(), file: e.target.getAttribute('pdf-url').trim()})
}
}
}
});
这个方法感觉有点麻烦,后面又找到一个超级简单的方法,
解决办法二:
var myApp= new Vue({
el: "#app",
data: {
book: null
},
mounted () {
this.$nextTick(() => {
// 动态添加dom元素,并绑定VUE事件(打开pdf)(.pdf-item为动态添加的元素,放置在父元素.pdf-body下)
$('.pdf-body').on('click', '.pdf-item', this.openPdf)
}
},
methods: {
openPdf () {
let attributes = e.target.getAttributeNames()
if (attributes.includes('pdf-title') && attributes.includes('pdf-url')) {
common.openPDF({title: e.target.getAttribute('pdf-title').trim(), file: e.target.getAttribute('pdf-url').trim()})
}
}
}
这对产品内容配置有一定要求:
本保险不承保前往处于战争状态或已被宣布为紧急状态的国家或地区,最新信息以登陆战争状态地区的查询结果为准。
vue给标签动态添加元素_动态添加dom元素,并绑定vue事件相关推荐
- html 元素响应,jQuery动态添加html元素后,响应事件的问题记录
var li = " " + "" + // 缩略图 点击部分 index='" + i + "' "" + " ...
- 运用jQuery动态向html中添加表格元素
实现的功能是运用jQuery动态的向一个table中添加行元素,很简单,也不废话,直接上代码. <!DOCTYPE html> <html lang="en"&g ...
- 【原生js】js动态添加dom,如何绑定事件
首先要明白浏览器在加载页面的时候是按顺序来加载的,这样以来就很清楚了,js动态添加dom以后,这些dom并没有绑定事件,这个时候最简单的一个办法就是:将绑定事件的方法封装到一个函数A中,在动态添加完d ...
- python字典键盘添加元素_对python字典元素的添加与修改方法详解
1.字典中的键存在时,可以通过字典名+下标的方式访问字典中改键对应的值,若键不存在则会抛出异常.如果想直接向字典中添加元素可以直接用字典名+下标+值的方式添加字典元素,只写键想后期对键赋值这种方式会抛 ...
- Vue全家桶学习笔记_零基础入门到入坑:Vue篇
文章目录 前言 什么是Vue,什么又是框架 完善的准备 Vue 引入 npm 安装 cnpm镜像加速器 安装 Vue-Cli脚手架 安装 webpack 安装 webpack-cli 安装 axios ...
- javascrpt --- 使用jquery添加dom元素和Angular ng-repeat生成select性能比较
今天用两种方法实现了动态的给select添加option的功能. 第一种是用jquery. // html <select id="drag-pointList">&l ...
- jq在html中添加dom元素,使用jQuery添加DOM元素的最佳方法
所以我已经看到了三种向页面添加html/DOM元素的方法.我很好奇他们每个人的利弊是什么. 1 - 传统的JavaScript 我相信直接的JS方法是通过构造每个元素,设置属性,然后附加它们.例: v ...
- 获取不到html页面上的元素,Vue v-for渲染页面,获取不到DOM元素解析
v-for 渲染循环渲染页面的出现让我们告别了繁琐的JS拼接,在开发上面节省了很多时间. 近期在开发中发现了在某些特定情况下,出现了获取不到渲染出来的DOM元素的情况,原因身为小白的我暂时还没搞清楚( ...
- vue如何获取div的宽度_vue获取dom元素高度的方法
获取DOM高度: 要在钩子mounted里面dom结构生成后去获取dom的高度,宽度,修改样式等操作(参照生命周期钩子mounted语法:https://cn.vuejs.org/v2/api/#mo ...
- python动态柱状图_动态排名柱状图的两种做法
受B站拜年祭发射最多的弹幕是什么?视频启发,对日常维护工作中的故障硬件也做了一次盘点.这里介绍两种方法,第一种是Python + Matplotlib:第二种是利用GitHub上现成的"轮子 ...
最新文章
- Unity内置的三套消息发送机制的应用实例
- MySQL之如何删除重复数据只保留一条
- 实例变量 成员变量 java 1615135036
- 系统相机裁剪比例_从照相到摄影你只差这5个技巧!人像裁剪这4大原则你一定要了解...
- 解决https无法缓存的问题
- python声明匿名函数_举例讲解Python的lambda语句声明匿名函数的用法
- bzoj 3412: [Usaco2009 Dec]Music Notes乐谱
- Bootstrap 教程 之 Less 入门文档
- 电子表格计算机操作题及素材,2015计算机应用基础-excel电子表格题目.doc
- red hat linux7下载地址,Red Hat Enterprise Linux 7 百度下载地址分享
- ACM学习历程—HDU 5025 Saving Tang Monk(广州赛区网赛)(bfs)
- turtle画彩虹蟒蛇
- Android应用耗电问题排查
- EXCEL 公式中 sheet名字 用 单元格值 代替
- 益寿延年,这13种食物真是宝,能延寿10年,赶紧收藏!
- EasyExcel基础使用教程
- Python基础1_沙窝李的王
- tar 命令压缩时报错 tar: Removing leading `/' from member names
- R语言实战应用精讲50篇(三十)-R语言ggplot2绘制精美高级地图
- 解决matlab中文乱码问题
热门文章
- 不懂Shopee站点分析,入驻Shopee平台哪个站点?
- excel 如何批量删除必表中的空白行
- The Code is successfully generatd...使用stm32cude生成工程时报错
- 腾讯云 python sdk_腾讯云CDN python SDK
- 说说基因组的垃圾DNA-Transposable elements
- 视频剪辑制作教学:分享十种剪辑技巧,打好基础很重要
- WebStorm之如何清除缓存
- 【教程】迅为iTOP-4412精英版exynos4412开发板搭建原生Linux最小系统(二)
- Tokenized的设计哲学(三)
- 栈和队列的顺序和链式存储结构