Vue学习之路第四篇：v-html指令
上一篇我们讲解了两种方式，把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指令的更多相关文章
- Vue学习之路第十三篇：v-for指令
v-for指令,看名字想必大家也能猜到其作用,没错,就是用来迭代.遍历的. 1.简单数组的遍历 <body> <divi id="app"> <spa ...
- Vue学习之路第三篇：插值表达式和v-text的区别
上一篇说到插值表达式有一个问题: 页面频繁刷新或者网速加载很慢的时候,页面会先出现“{{ msg }}”,再一闪而过出现真实的数据. 对于这个问题Vue给予了解决办法,看具体事例. <div i ...
- 后端开发者的Vue学习之路（四）
目录 上节内容回顾: npm 介绍 安装 常用命令: 补充: 基于npm的Hello World 项目结构分析 用法迁移 小提醒 ES6语法 知识补充 单文件组件 使用注意: 路由 开启路由 定义路由 ...
- Java学习之路 第四篇 oop和class (面向对象和类)
本人水平有限,创作本文是为了记录学习和帮助初学者学习,欢迎指正和补充 一.面向对象编程的设计概述 很多同学都在学校学了电脑的编程,现在的书籍大部分都是oop面向对象编程,一个很抽象的的名字,比较难以理 ...
- vue学习指南：第四篇(详细) - vue的 :class 和 :style
1. :class = “a” 说明 vue 中有个叫 a 的属性 这个标签的class 就是 a的值 2. :class = “{ active:isactive }” Active的存在取决于 i ...
- Vue学习之路第二十篇：Vue生命周期函数-组件创建期间的4个钩子函数
1.每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运行一些叫做生命周期钩子的函数 ...
- Vue学习之路第十一篇：为页面元素设置class类样式
1.class为页面元素的一个属性,通过前面第五篇的内容可知,操作属性需要使用到v-bind指定(也可简写为 :). 2.先来看一个简单的页面样式内容: <!DOCTYPE html> & ...
- Vue学习之路第十篇：简单计算器的实现
前面九篇讲解了vue的一些基础知识,正所谓:学以致用,今天我们将用前九篇的基础知识,来模拟实现计算器的简单功能,项目价值不高,纯粹是为了加深掌握所学知识. 学前准备: 需要掌握JavaScript的e ...
- Vue学习之路第八篇：事件修饰符
学习准备: ①.顾名思义,“事件修饰符”那么肯定是用来修饰事件,既然和事件有关系,那么肯定和“v-on”指令(也可简写为:@)有关系了. ②.事件修饰符有以下几类: .stop:阻止冒泡 .preve ...
随机推荐
- obj-c部分对象快捷赋值和取值
NSNumber: NSNumber *number = @1234; 旧的方式: NSArray *physicsValues = [NSArrayarrayWithObjects: [NSNumb ...
- P3369 【模板】普通平衡树 (splay 模板)
题目描述 您需要写一种数据结构(可参考题目标题),来维护一些数,其中需要提供以下操作: 插入x数 删除x数(若有多个相同的数,因只删除一个) 查询x数的排名(排名定义为比当前数小的数的个数+1.若有多 ...
- linux github 添加ssh
1.本地生成key, xxx 是github 的账号, 执行下面命令一路下一步 ssh-keygen -t rsa -C "xxx" 2.复制下面的public key 到git ...
- fs
yum install -y make expat-devel git gcc-c++ autoconf automake libtool wget python-devel ncurses-deve ...
- prim求最小生成树
一直以来只会Kruskal prim和dijkstra很像 只不过prim维护的是最短的边,而dijkstra维护的是最短的从起点到一个点的路径 同时prim要注意当前拓展的边是没有拓展过的 可以用堆 ...
- 洛谷 P1137 旅行计划 （拓扑排序+dp）
在DAG中,拓扑排序可以确定dp的顺序 把图的信息转化到一个拓扑序上 注意转移的时候要用边转移 这道题的dp是用刷表法 #include<bits/stdc++.h> #define RE ...
- appium运行from appium import webdriver 提示most recent call last
这是因为首次启动提示没有APPIUM 模块,CMD 执行 :pip3 install Appium-Python-Client
- G - Arctic Network
G - Arctic Network #include<cmath> #include<cstdio> #include<cstring> #include&l ...
- ios网络学习------3 用非代理方法实现异步post请求
#pragma mark - 这是私有方法.尽量不要再方法中直接使用属性,由于一般来说属性都是和界面关联的,我们能够通过參数的方式来使用属性 #pragma mark post登录方法 -(void) ...
- 从C到C++(下)
继承 从一个类派生到另外一个类,使前者的所有特征在后者中自己主动可用. 他能够声明一些类型,这些类型能够共享部分或所有曾经所声明的类型.它也能够从超过一个的基类中共享一些特性. C++是支持多继承的. ...