目录
一、前言
二、使用步骤
1.引入vue
2.生成构造器,创建子类
三.遇到的问题
一、前言
最近这两天工作中有个需求,将接口返回的html标签渲染出来,最开始用的v-html,可以渲染出来,但是a标签上绑定的事件触发不了,然后事件上绑定的参数就拿不到,最后使用模板成功解决
二、使用步骤
1.引入vue
代码如下:
import Vue from 'vue/dist/vue.esm.js'
注意:最开始引用方式是 import Vue from 'vue',结果会报错
[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
2.生成构造器,创建子类
代码如下:
<template>
<div id='parent'>
</div>
</template>
import Vue from 'vue/dist/vue.esm.js'
export default {
data () {
return {
test333: 'ddd'
}
},
mounted () {
//这里改变一下this指向,下面就可以调用外面的参数方法等
var _this=this
// 创建构造器
var Profile = Vue.extend({
template: "<p><span style='font-family: 微软雅黑;'>点击这里进行查看</span> <a href='javascript:void(0)' @click='lookDetails(\"参数一\",\"参数二\")'>查看详情</a></p>",
methods: {
lookDetails (a, b) {
console.log('成功',a, b,_this.test333)
}
}
})
// 创建 Profile 实例,并挂载到一个元素上。
new Profile().$mount('#parent')
}
}
页面展示
点击后控制台打印
文章来源:https://www.toymoban.com/news/detail-556153.html
文章来源地址https://www.toymoban.com/news/detail-556153.html
3.遇到的问题
- 最开始接口返回的a标签绑定的方法没有用引号包裹,a标签渲染不出来
- 还要注意单双引号的使用,方法用双引号包裹后,方法里参数要用单引号
- 最开始接口返回的a标签事件用的onclick,然后一直报错方法undefined,后来改成@click就可以了
- 需要在要绑定的父元素挂载完成后才能执行此方法,不然会报错找不到
到了这里,关于vue中渲染接口返回的html标签及标签上绑定事件处理的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!