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

这篇具有很好参考价值的文章主要介绍了vue中渲染接口返回的html标签及标签上绑定事件处理。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

目录

一、前言

二、使用步骤

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')
  }
}