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

这篇具有很好参考价值的文章主要介绍了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')
  }
}

页面展示

点击后控制台打印

 vue 渲染html,开发语言,javascript,vue.js,前端

 文章来源地址https://www.toymoban.com/news/detail-556153.html

 3.遇到的问题

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

到了这里,关于vue中渲染接口返回的html标签及标签上绑定事件处理的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue.js核心概念简介:组件、数据绑定、指令和事件处理

    本文介绍了Vue.js的四个核心概念:组件、数据绑定、指令和事件处理。每个概念都通过一个简单的示例进行了详细的解释。通过学习这些概念,您将能够充分利用Vue.js的强大功能,构建高效、灵活的Web应用程序。 1 组件 组件是Vue.js的核心概念之一,它允许您将UI分解为相互作

    2024年02月04日
    浏览(59)
  • 微信小程序之WXML 模板语法之数据绑定、事件绑定、wx:if和列表渲染

    学习的最大理由是想摆脱平庸,早一天就多一份人生的精彩;迟一天就多一天平庸的困扰。各位小伙伴,如果您: 想系统/深入学习某技术知识点… 一个人摸索学习很难坚持,想组团高效学习… 想写博客但无从下手,急需写作干货注入能量… 热爱写作,愿意让自己成为更好

    2024年01月22日
    浏览(61)
  • v-html 绑定事件

    把点击事件函数挂在在window下面

    2024年02月03日
    浏览(42)
  • 微信小程序wxml的数据和事件的绑定,以及条件和列表的渲染

    关于微信小程序知识点一共做了六个博客,涵盖大部分内容,有想学习的可以按照以下顺序查看 1.微信小程序的启动和渲染过程(加组件分类和组件的基本使用以及API分类) 2.微信小程序wxml的数据和事件的绑定,以及条件和列表的渲染 3.微信小程序wxss相关介绍、全局配置和tabbar知识

    2024年02月10日
    浏览(63)
  • Vue3 axios响应拦截器处理接口返回401未登录跳转登录页

    问题: 在 asiox 使用 useRouter 实例化创建 router 路由对象,在 response 响应拦截器里为 undefined 访问不到 使用 window.location.href = \\\'/login\\\' 跳转登录页, 本地可以正常跳转,测试环境页面会显示 not found 404, 测试环境访问地址大概是这样 ip:8080/pm/#/login , 本地没有 /pm 解决方案: 在 mai

    2024年01月21日
    浏览(47)
  • 前端调用后端接口,返回200,但是数据返回的是html标签

    这是一个前后端分离的项目,后端已经完成,后端在本地上,自动创建了数据库,前端为了完成一个注册功能,去调用后端的/registerUser接口,当输入用户名和密码的时候,我也查过csdn上其他博主的回答,但是并不能很清除的去解决我的问题,这边的bug是返回的虽然是 200 响应

    2024年03月22日
    浏览(52)
  • 前端渲染后端返回的HTML格式的数据

    在日常开发中,经常有需要前端渲染后端返回页面的需求,对于不同数据结构,前端的渲染方式也不尽相同,本文旨在对各种情况进行总结。 数据包含html标签等元素,数据类型如下图: 前端通过 js 方式处理 前端需要渲染网址中的页面,可通过iframe实现: 数据包含部分标签

    2024年02月08日
    浏览(56)
  • react如何渲染包含html标签元素的字符串

    最近有个搜索替换的需求,用户可以输入信息来匹配出对应的数据,然后对其进行标记显示,如下图所示: 实现上面的需求的思路就是前端去判断检索内容,将内容中对应的设置一个背景颜色的样式,代码如下: 但这样设置后并未达到我想要的效果,前端

    2024年02月03日
    浏览(41)
  • Vue 数据绑定 和 数据渲染

    目录 一、Vue快速入门         1.简介 :           2.MVVM :          3.准备工作 :  二、数据绑定         1.实例 :          2.验证 :  三、数据渲染         1.单向渲染 :          2.双向渲染 :  四、事件绑定         1.简介 :          2.实例 :  五、修饰符         1.简

    2024年02月06日
    浏览(37)
  • 使用v-html进行渲染如何使标签按照字符串显示,特殊样式标签(自己添加的部分)按照标签解析

    使用v-html进行渲染如何使标签按照字符串显示,特殊样式标签(自己添加的部分)按照标签解析 需求:是内容里如果含有含有www.baidu.com这种链接高亮显示 解决办法: 首先拿到需要回显的内容content对内容进行转义escapeHTML,之后再去判断是否是链接进行高亮添加 代码如下

    2024年02月16日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包