上一篇我们讲解了两种方式，把Vue对象的数据展示在页面上：

1、插值表达式

2、v-text指令

但是如果我们展示的数据包含元素标签或者样式，我们想展示标签或样式所定义的属性作用，该怎么进行渲染，比如展示内容为：<h1>这是一个h1元素内容</h1>。我们先用插值表达式和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>

运行结果，如下：

结论：插值表达式和v-text指令被直接解析为了字符串元素。对此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>

运行结果：

成功的解析了标签属性。大家也可以尝试定义样式属性看看，如下：

var vm = new Vue({

            el : "#app",

            data : {

                msg : "<h1 style='color:red'>这是一个h1元素内容</h1>"

            }

});

每天进步一点点！

Vue学习之路第四篇：v-html指令的更多相关文章

  1. Vue学习之路第十三篇：v-for指令

    v-for指令,看名字想必大家也能猜到其作用,没错,就是用来迭代.遍历的. 1.简单数组的遍历 <body> <divi id="app"> <spa ...

  2. Vue学习之路第三篇：插值表达式和v-text的区别

    上一篇说到插值表达式有一个问题: 页面频繁刷新或者网速加载很慢的时候,页面会先出现“{{ msg }}”,再一闪而过出现真实的数据. 对于这个问题Vue给予了解决办法,看具体事例. <div i ...

  3. 后端开发者的Vue学习之路（四）

    目录 上节内容回顾: npm 介绍 安装 常用命令: 补充: 基于npm的Hello World 项目结构分析 用法迁移 小提醒 ES6语法 知识补充 单文件组件 使用注意: 路由 开启路由 定义路由 ...

  4. Java学习之路 第四篇 oop和class (面向对象和类)

    本人水平有限,创作本文是为了记录学习和帮助初学者学习,欢迎指正和补充 一.面向对象编程的设计概述 很多同学都在学校学了电脑的编程,现在的书籍大部分都是oop面向对象编程,一个很抽象的的名字,比较难以理 ...

  5. vue学习指南：第四篇(详细) - vue的 :class 和 :style

    1. :class = “a” 说明 vue 中有个叫 a 的属性 这个标签的class 就是 a的值 2. :class = “{ active:isactive }” Active的存在取决于 i ...

  6. Vue学习之路第二十篇：Vue生命周期函数-组件创建期间的4个钩子函数

    1.每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运行一些叫做生命周期钩子的函数 ...

  7. Vue学习之路第十一篇：为页面元素设置class类样式

    1.class为页面元素的一个属性,通过前面第五篇的内容可知,操作属性需要使用到v-bind指定(也可简写为 :). 2.先来看一个简单的页面样式内容: <!DOCTYPE html> & ...

  8. Vue学习之路第十篇：简单计算器的实现

    前面九篇讲解了vue的一些基础知识,正所谓:学以致用,今天我们将用前九篇的基础知识,来模拟实现计算器的简单功能,项目价值不高,纯粹是为了加深掌握所学知识. 学前准备: 需要掌握JavaScript的e ...

  9. Vue学习之路第八篇：事件修饰符

    学习准备: ①.顾名思义,“事件修饰符”那么肯定是用来修饰事件,既然和事件有关系,那么肯定和“v-on”指令(也可简写为:@)有关系了. ②.事件修饰符有以下几类: .stop:阻止冒泡 .preve ...

随机推荐

  1. jmeter出现乱码怎么解决

    本文是抄袭安大叔的性能    如果想在性能获得更好的发展  请添加公众号:测试那点事  大叔的群号:435092293  大叔曾经担任百度技术总监  很牛逼  相信大叔知道了不会怪我  毕竟我是你的学 ...

  2. Python爬虫1-----urllib模块

    1.加载urllib模块的request from urllib import request 2.相关函数: (1)urlopen函数:读取网页 webpage=request.urlopen(ur ...

  3. awk一次性分别赋值多个value给多个变量,速度对比

    方法 #方法1: echo "apple banana orange" | awk '{print $1,$2,$3}' | while read a b c do echo a= ...

  4. 【Tool】Augmentor和imgaug——python图像数据增强库

    Augmentor和imgaug--python图像数据增强库 Tags: ComputerVision Python 介绍两个图像增强库:Augmentor和imgaug,Augmentor使用比较 ...

  5. python 获取excel数据 自动登陆

    import xlrdimport timeimport unittestfrom selenium import webdriver class u8819(unittest.TestCase): ...

  6. Python面向对象----多态和鸭子类型

    1. C#中多态实现的条件是 继承, 重写以及父类指向子类. 但是在弱类型Python里面, 实现多态的条件就显得很简洁, 只需要在子类中实现父类相同名称的方法即可. 2. 鸭子类型的解释: 若一个类 ...

  7. 2019-04-03 SQL Group By某列，预先对该列进行一个预处理，提炼出共有的信息，即关键字case when 列名什么条件 then 赋值 else 赋值 end as 新列名

    select sum(发行金额) from( select PoolNameFormat,count(cast(ItemValue as decimal(19,4))) as 发行笔数,sum(cas ...

  8. 使用LeNet训练自己的手写图片数据

    一.前言 本文主要尝试将自己的数据集制作成lmdb格式,送进lenet作训练和测试,参考了http://blog.csdn.net/liuweizj12/article/details/5214974 ...

  9. HDU1850 Being a Good Boy in Spring Festival

    /* HDU1850 Being a Good Boy in Spring Festival http://acm.hdu.edu.cn/showproblem.php?pid=1850 博弈论 尼姆 ...

  10. smartctl----硬盘状态监控

    smartmontools介绍 smartmontools是一款开源的磁盘控制,监视工具,可以运行在Linux,Unix,BSD,Solaris,Mac OS,OS/2,Cygwin和Windows上 ...