vue+iview 使用v

您所在的位置：网站首页 › iview在vue3使用 › vue+iview 使用v

vue+iview 使用v

2023-08-16 11:06| 来源: 网络整理| 查看: 265

使用v-html属性显示html代码并调用方法项目架构使用window对象的原因场景1这是定义方法/变量这是赋空方法/变量不使用window对象，使用h5中的标签属性html部分方法区v-html代码

项目架构

vue +iview

使用window对象的原因

需要自己拼接HTML代码即使用 v-html 属性在自己拼装的html代码中添加方法使用的是 οnclick="changeSelBtn(’ + a + ',2)" 这个方法不能直接调用到vue中的 methods 中的方法暂时定义了window对象方法使用在使用后，会导致window对象中方法/变量在不断增加，可能在其他页面使用到相同的方法/变量导致数据或函数错误想到的解决方法1 在vue周期中，销毁页面之前或者销毁之后删除或将方法/变量赋空想到的方法2 没有想到下附代码

场景1

一个拼接好的HTML里边含有多个方法

这是定义方法/变量 tableDisplay(data) { let vm = this let html = ' \n' + ' \n' + ' \n' + ' 名称\n' + ' id\n' + ' 时间\n' + ' 状态\n' + ' 操作\n' + ' \n' + ' ' // 循环tr data.forEach(item1 => { html += ' ' + item1.name + '' item1.instance.forEach(item => { let a = vm.htmlEncodeByRegExp(JSON.stringify(item)) html += '' + item.instanceId + '' html += '' + vm.fmtDate(Number(item.lastUpdatedTimestamp)) + '' html += '' + item.status + ' ' html += '' + '' + (item.status === 'UP' ? '暂停' : '恢复') + '' + '移除' + '查询' + '' }) }) html += '' document.getElementById('tableShow').innerHTML = html window.changeSelBtn = function(data, type) { vm.changeSelBtn2(data, type) } }, 这是赋空方法/变量 // 销毁前 beforeDestroy () { delete window.changeSelBtn }, // 销毁后 destroyed(){ delete window.changeSelBtn } 不使用window对象，使用h5中的标签属性

拼接好的html中只有一个方法时上代码

html部分方法区根据获取到的dom对象获取对应的值 hopRouting(e) { let vm = this let target = e.target 判断是否是自己需要的标签 a 标签，data-type 类型为 workorder 获取到的内容为 data-id中的 if (target.nodeName.toLowerCase() === 'a' && target.getAttribute('data-type') === 'workorder' ) { // 进行自己的逻辑处理我这是跳转路由 vm.$router.push({ name: '我的路由名字', params: { workorderId: target.getAttribute('data-id') } }) } }, v-html代码

messageContent

前缀：显示内容, 后缀

如果有更好的方法请联系，谢谢浏览

【本文地址】

vue+iview 使用v

vue+iview 使用v

今日新闻

推荐新闻