问题

如果我们展示的数据包含元素标签或者样式，我们想展示标签或样式所定义的属性作用，该怎么进行渲染

插值表达式{{}}和v-text指令被直接解析为了字符串元素。

<body>

    <div id="app">

        <p v-cloak>{{ msg }}</p>

        <p v-text="msg"></p>

    </div>

    <script type="text/javascript">

        var vm = new Vue({

            el : "#app",

            data : {

                msg : "<h1>这是一个h1元素内容</h1>"

            }

        });

    </script>

</body>

解决方法

对此Vue提供了另外一个指令：v-html

<div id="app">

        <p v-cloak>{{ msg }}</p>

        <p v-text="msg"></p>

        <p v-html="msg"></p>

    </div>

    <script type="text/javascript">

        var vm = new Vue({

            el : "#app",

            data : {

                msg : "<h1>这是一个h1元素内容</h1>"

            }

        });

    </script>

v-html | 数据内容包含元素标签或者样式的更多相关文章

  1. 从a标签为什么不能包含div标签-了解HTML5元素分类与内容模型

    我们知道按新的 HTML 规范,已经不按 inline 和 block 来区分元素类型了.所以我们在a标签里面使用div标签时候会发现a标签并不能通过改变css盒子模型的方式将div元素包含. 元素分 ...

  2. js清除节点内容（改变标签元素）

    <!DOCTYPE HTML><html> <head>        <meta http-equiv="Content-Type" c ...

  3. 第一百六十六节，jQuery，基础 DOM 和 CSS 操作，元素内容，元素属性，css和class，元素宽度高度、偏移、滚动条

    jQuery,基础 DOM 和 CSS 操作,元素内容,元素属性,css和class,元素宽度高度.偏移.滚动条 学习要点: 1.DOM 简介 2.设置元素及内容 3.元素属性操作 4.元素样式操作 ...

  4. HTML 5的革新之一：语义化标签一节元素标签。

    摘至于:<HTML 5的革新——语义化标签(一)> HTML 5的革新之一:语义化标签一节元素标签. 在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义.(即 ...

  5. /.nav-tabs :是普通标签页 .nav-pills:胶囊式标签页 action ;默认的激活项，给<li>加默认显示的是哪个标签页内容 .nav是标签页的一个基类，给ul加 .nav-stacked: 垂直排列BootStrap

    <meta name="viewport" content="with=device-width, initial-scale=1, user-scalabe=no ...

  6. 【必杀】为应用程序池“XXX”提供服务的进程在与 Windows Process Activation Service 通信时出现严重错误。该进程 ID 为“XXXX”。数据字段包含错误号。

    之前写过一篇文章,https://www.cnblogs.com/qidian10/p/6028784.html 解释如何解决此类问题,但现在回过头来想一下,之前的文章还是太过浅显,无法完全有效的彻底 ...

  7. 面试小记---外部脚本必须包含 <script> 标签吗？

    外部脚本必须包含 <script> 标签吗? 答案是否定的. 身为小白的我一开始也是以为这句话的对了,因为本来嘛,引用外部脚本不都用的是<script>标签中的src属性吗.所 ...

  8. jquery内容选择器（根据内容匹配元素）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. GZip压缩的js文件IE6下面不能包含<script>标签

    IE6下面,GZip压缩的js文件,如果js中包含<script>标签,一遇到这样的标签,后面的内容居然都截断了,狂晕! 花了我一个晚上来找原因.. 需要将字符串'<script&g ...

随机推荐

  1. 检验appium环境是否正常：使用appium自动给手机安装app（注意：如果已存在该app，再执行会将原来的卸载再重装，需谨慎）

    (注意:如果已存在该app,再执行会将原来的卸载再重装.泪的教训,我的微信被卸载重装了o(╥﹏╥)o,自动安装app这个步骤需谨慎操作) hi,前面几篇已经讲了appium环境的搭建.设备的连接, 那 ...

  2. 鸿蒙内核源码分析(进程回收篇) | 老父亲如何向老祖宗临终托孤 ? | 百篇博客分析OpenHarmony源码 | v47.01

    百篇博客系列篇.本篇为: v47.xx 鸿蒙内核源码分析(进程回收篇) | 临终前如何向老祖宗托孤 | 51.c.h .o 进程管理相关篇为: v02.xx 鸿蒙内核源码分析(进程管理篇) | 谁在管 ...

  3. 鸿蒙内核源码分析(中断概念篇) | 海公公的日常工作 | 百篇博客分析OpenHarmony源码 | v43.02

    百篇博客系列篇.本篇为: v43.xx 鸿蒙内核源码分析(中断概念篇) | 海公公的日常工作 | 51.c.h .o 硬件架构相关篇为: v22.xx 鸿蒙内核源码分析(汇编基础篇) | CPU在哪里 ...

  4. 图数据库Neo4j的基本使用及与SpringBoot集成

    Neo4j 官网地址:https://neo4j.com/ 下载地址:https://neo4j.com/download-center/#community 官方入门文档:https://neo4j ...

  5. mysql 建表后 重新构建 自增字段 （保留 原有字段结构）

    添加字段 1.去除原id的自增功能:ALTER TABLE A_A MODIFY COLUMN id int(10) NOT NULL FIRST ; 2.添加名称为cstId,类型为bigint的字 ...

  6. 从零入门 Serverless | SAE 的远程调试和云端联调

    作者 | 弈川 阿里巴巴云原生团队 导读:本节课程包含三部分内容,前两个部分简单介绍远程调试以及端云联调的原理,最后在 Serverless 应用引擎中进行实际演示. 经过之前课程的学习,相信大家对于 ...

  7. Centos7最小安装后快速初始化脚本

    功能说明 服务器通常使用最小化安装操作系统,使用该脚本可快速初始化一些基本配置,包括以下: 1.ssh修改默认端口 2.ssh禁止root登陆 3.selinux及firewalld禁用 4.hist ...

  8. uoj167 元旦老人与汉诺塔（记忆化搜索）

    QwQ太懒了,题目直接复制uoj的了 QwQ这个题可以说是十分玄学的一道题了 首先可以暴搜,就是\(dfs\)然后模拟每个过程是哪个柱子向哪个柱子移动 不多解释了,不过实现起来还是有一点点难度的 直接 ...

  9. django-admin和django-admin.py的区别

    问题 django初学者在使用django-admin创建项目时容易出现无法创建的错误,这是因为网上很多教程用的都是django-admin.py创建的项目,不出意外的话,你输入相同的命令会发现项目没 ...

  10. 【二食堂】Beta - Scrum Meeting 11

    Scrum Meeting 11 例会时间:5.26 18:30~18:50 进度情况 组员 当前进度 今日任务 李健 1. 文本导入.保存部分的工作比想象中的难,还需要一些时间完成issue 1. ...