上一篇我们讲解了两种方式，把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. Python数据分析--------numpy数据打乱

    一.shuffle函数: import numpy.random def shuffleData(data): np.random.shufflr(data) cols=data.shape[1] X ...

  2. Python笔记17---------魔法方法

    魔法方法也为特殊方法,即用两个下划线形成的(__方法__).自己定义的方法最好不要采用这种方式,因为这些方法会在一些特殊的情况下直接被调用. 1.第一个魔法方法:类中常用的__init__()方法:相 ...

  3. fork() 函数解析

    转载自http://blog.csdn.net/jason314/article/details/5640969  一.fork入门知识 一个进程,包括代码.数据和分配给进程的资源.fork()函数通 ...

  4. js 现给数字加三位一逗号间隔的种方法

    方法一:(ie下有问题) <script type= "text/javascript"> var num_s = "1232134456.546 " ...

  5. 在IntelliJ IDEA中创建Maven多模块项目

    在IntelliJ IDEA中创建Maven多模块项目 1,创建多模块项目选择File>New>Project 出现New Project窗口左侧导航选择Maven,勾选右侧的Create ...

  6. [ES6] Proxy & Reflect

    Proxy and Reflect API works nicely together. About how to use Proxy, check this post. Let's see abou ...

  7. unity3d 中动画的帧事件

    代码事件监听 using UnityEngine; using System.Collections; public class BoxEventScript : MonoBehaviour { vo ...

  8. JavaScript 中对变量和函数声明提前的演示样例

    如题所看到的,看以下的演示样例(能够使用Chrome浏览器,然后F12/或者右键,审查元素.调出开发人员工具,进入控制台console输入)(使用技巧: 控制台输入时Shift+Enter能够中途代码 ...

  9. 每天自己主动备份mysql脚本

    定时运行脚本: 1.运行 crontab -e 00 00 * * * /bin/bash yourpath/mysqlbak.sh 2.打开自己主动运行文件 vi /etc/crontab 在etc ...

  10. 运行shell命令

    首先将shell命令命名为.sh文件 将上面的代码保存为test.sh.并 cd 到对应文件夹: chmod +x ./test.sh #使脚本具有运行权限 ./test.sh #运行脚本 假设报错/ ...