vue给标签动态添加元素_动态添加dom元素，并绑定vue事件

背景&＃xff1a;后管系统配置一个产品后&＃xff0c;前端(vue.js框架)取到这些产品信息并展示出来&＃xff0c;产品经理要求在文本内容中添加链接。

例如&＃xff1a;

本保险不承保前往处于战争状态或已被宣布为紧急状态的国家或地区&＃xff0c;最新信息以登陆http://baoxian.pingan.com/dangerous_zone/war.shtml的查询结果为准。

如果上面内容中是简单的链接跳转&＃xff0c;用v-html把上面段内容展示出来即可。

问题关键是&＃xff0c;不仅仅是简单的链接&＃xff0c;还要有一些逻辑判断&＃xff0c;所以要用“动态添加dom元素&＃xff0c;并绑定vue事件”

解决办法一&＃xff1a;

因为VUE是先编译&＃xff0c;后执行&＃xff0c;所以元素上的方法要预先绑定。

这是我们定义的VUE组件&＃xff0c;放在最外层&＃xff1a;

var periodDiv &＃61; Vue.extend({

template: "

methods: {

toLink: function ($event) {

var urlStr &＃61; $event.target.getAttribute("data-url").trim();

// 一些复杂的逻辑判断

myApp.doLink(urlStr); // 调用myApp的方法

}

}

});

var myApp&＃61; new Vue({

el: "#app",

data: {

book: null

},

mounted () {

var component &＃61; new periodDiv().$mount(); // 每次添加需要重新new一个

var $dom &＃61; $(component.$el); // 获取动态元素的jquery对象

},

methods: {

doLink: function (url) {

openPdf(url);

},

openPdf () {

let attributes &＃61; e.target.getAttributeNames()

if (attributes.includes(&＃39;pdf-title&＃39;) && attributes.includes(&＃39;pdf-url&＃39;)) {

common.openPDF({title: e.target.getAttribute(&＃39;pdf-title&＃39;).trim(), file: e.target.getAttribute(&＃39;pdf-url&＃39;).trim()})

}

}

}

});

这个方法感觉有点麻烦&＃xff0c;后面又找到一个超级简单的方法&＃xff0c;

解决办法二&＃xff1a;

var myApp&＃61; new Vue({

el: "#app",

data: {

book: null

},

mounted () {

this.$nextTick(() &＃61;> {

// 动态添加dom元素&＃xff0c;并绑定VUE事件(打开pdf)(.pdf-item为动态添加的元素&＃xff0c;放置在父元素.pdf-body下)

$(&＃39;.pdf-body&＃39;).on(&＃39;click&＃39;, &＃39;.pdf-item&＃39;, this.openPdf)

}

},

methods: {

openPdf () {

let attributes &＃61; e.target.getAttributeNames()

if (attributes.includes(&＃39;pdf-title&＃39;) && attributes.includes(&＃39;pdf-url&＃39;)) {

common.openPDF({title: e.target.getAttribute(&＃39;pdf-title&＃39;).trim(), file: e.target.getAttribute(&＃39;pdf-url&＃39;).trim()})

}

}

}

这对产品内容配置有一定要求&＃xff1a;

本保险不承保前往处于战争状态或已被宣布为紧急状态的国家或地区&＃xff0c;最新信息以登陆战争状态地区的查询结果为准。