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 ...
随机推荐
- Django之组合查询
一 .Django组合查询 很多电商网站中有组合搜索的功能,所谓组合搜索就是网页中组合多个条件,对数据库中进行查询,并且将结果显示在页面中,下面是所做组合查询效果图: 实现代码如下: <1> ...
- obj-c部分对象快捷赋值和取值
NSNumber: NSNumber *number = @1234; 旧的方式: NSArray *physicsValues = [NSArrayarrayWithObjects: [NSNumb ...
- PHP图片验证码处理
- Python-基础-day2
Python环境的安装 安装Python: windows: 1.下载安装包 https://www.python.org/downloads/ 2.安装 默认安装路径:C:\pyth ...
- ActiveMQ 整合 spring
一.添加 jar 包 <dependency> <groupId>org.apache.activemq</groupId> <artifactId>a ...
- 应用市场快速下载以及网页端调起APP页面研究与实现
Github博文地址,此处更新可能不是非常及时. 好久没写博客了,好大一个坑. 正好,近期刚做完应用市场的快速下载功能,便拿来填了这个坑. 话说产品为了添加用户量,提升用户活跃度以及配合推广,更坑爹的 ...
- linux网络启动报错
报错信息: shutting down interface eth0: error:device "eth0" (/org/freedsktop/networkMaager/Dev ...
- C++实现位数组
当我们遇到大量整数排序时候为了节省内存空间我们能够考虑使用bit数组来实现,缺点是其仅仅适用于正整数. 思想: 在32位系统一个int类型占4个字节,按位来计算一个int类型能够记录32个数.因此,採 ...
- 大型Web 站点 Asp.net Session过期你怎么办
在 WEB 系统中. 我们通常会用session来保存一些简单可是却非常重要的信息.比方Asp.net中常常会用Session来保存用户登录信息,比方UserID.为了解决 WEB场大家採用了把ses ...
- unity坐标转换问题
unity最经常使用的几种坐标.屏幕坐标.世界坐标.ngui坐标,相对于父物体的坐标(localPoisition). 可是有时候这几种坐标相互转换何其困难,让自己狠抓头. 不得不操作的方式是创建虚拟 ...