vue中渲染接口返回的html标签及标签上绑定事件处理

目录

一、前言

    最近这两天工作中有个需求，将接口返回的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')
  }
}

页面展示

点击后控制台打印

3.遇到的问题

1. 最开始接口返回的a标签绑定的方法没有用引号包裹，a标签渲染不出来
2. 还要注意单双引号的使用，方法用双引号包裹后，方法里参数要用单引号
3. 最开始接口返回的a标签事件用的onclick，然后一直报错方法undefined，后来改成@click就可以了
4. 需要在要绑定的父元素挂载完成后才能执行此方法，不然会报错找不到