专栏首页编程创造城市vue如何在页面上面输出html代码效果

vue如何在页面上面输出html代码效果

一般情况下vue中使用双大括号{{这里是变量}} 这种形式输出变量的话,即使变量中是html代码,它输出的结果也会将html代码转为普通文本输出。

也就是说,使用普通的双大括号的形式,会将html代码输出时,将标签转码为html中对应到浏览器的代码。浏览器无法解析我们的HTML代码。(实际上在HTML输出到浏览器之前,已经将其进行了转码)。

但有时候,我们需要浏览器去解析输出我们的HTML代码。如果我们想要输出html代码效果,我们需要使用一个标签,在这个标签上面加上v-html属性,值为需要输出的html代码的变量。

例如:

<span v-html="这里是含有html代码的变量"></span>

这个贼关键哈!

本文分享自微信公众号 - 编程创造城市(bcczcs),作者:刘金玉编程

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-04-30

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • html中的<!DOCTYPE html>起到什么作用?前端面试经常考到

    相信很多小伙伴都写过html代码,即使是一些刚接触零基础网页编程的小伙伴也是,但是很多人在学习到html较多以后,却不知,在一个网页创建的时候,很多编辑器都会自...

    刘金玉编程
  • 零基础html5+div+css+js网页开发教程第003期 html代码基本结构

    在第二期中,我们对html做了入门,已经有了对网页开发基本的了解。本节知识开始书写html网页结构。

    刘金玉编程
  • 零基础学网页开发入门(制作博客案例)适应手机端div+css+js的综合介绍

    html翻译一下:hype text mark language 超文本标记语言

    刘金玉编程
  • Java 代码性能调优“三十六”策

    代码优化,一个很重要的课题。可能有些人觉得没用,一些细小的地方有什么好修改的,改与不改对于代码的运行效率有什么影响呢?这个问题我是这么考虑的,就像大海里面的鲸鱼...

    技术zhai
  • 从零开始搭建Java开发环境第四篇:精选IDEA中十大提高开发效率的插件!

    当你进行对象之间赋值的时候,你会发现好麻烦呀,能不能有一个更好的办法呢~ 有,只要你选中需要生成set方法的对象,按下快捷键 alt+enter 界面如下:

    黄小斜
  • Kafka 中使用 Avro 序列化框架(二):使用 Twitter 的 Bijection 类库实现 avro 的序列化与反序列化

    使用传统的 avro API 自定义序列化类和反序列化类比较麻烦,需要根据 schema 生成实体类,需要调用 avro 的 API 实现 对象到 byte[]...

    CoderJed
  • WPF 播放 gif

    本文告诉大家如何在 WPF 播放 Gif 图片,提供了几个方法进行播放,包括比较性能。

    林德熙
  • Top命令学习

    top命令是Linux下常用的性能分析工具,能够实时显示系统中各个进程的资源占用状况,类似于Windows的任务管理器。

    zhangheng
  • pygrametl的使用--python

    pygrametl是一个python的package用于ETL(Extract-Transform-Load )

    py3study
  • 4.19 VR扫描: ANTVR推MR头显MIX;奥斯卡最佳女配角出演VR短片《Tide’s Fall》

    VRPinea

扫码关注云+社区

领取腾讯云代金券