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 ...
随机推荐
- Python笔记15------图像
主要三个库:Pilow(PIL).OpenCV.Skimage(针对scipy,用的少) 小例子:给一张图片的左上角粘贴一个相同的图片(缩略并旋转了45度) from PIL import Image ...
- 【转载】springboot注解
https://blog.csdn.net/yitian_66/article/details/80866571 springboot注解:@Service: 注解在类上,表示这是一个业务层bean@ ...
- 深入理解Java中的锁
转载:https://www.jianshu.com/p/2eb5ad8da4dc Java中的锁 常见的锁有synchronized.volatile.偏向锁.轻量级锁.重量级锁 1.synchro ...
- Hadoop安装和使用
1.安装 1.1.下载hadoop-2.5.1.tar.gz 1.2.解压至安装目录 tar -zxv -f hadoop-2.5.1.tar.gz -C ../soft/ 1.3.配置hadoop相 ...
- ZOJ 3888 Twelves Monkeys
Twelves Monkeys Time Limit: 5000ms Memory Limit: 32768KB This problem will be judged on ZJU. Origina ...
- mobile touch 备用
var _scrollIndex=1; function scrollPage(){ var _contentEle = $('.view-container'),_viewEle = _conten ...
- flash透明 处于最低
怎样在html中让flash透明 前提是FLASH里没有用其它形状或图形来作为背景.方法主要是在网页中的Flash加入一个参数,让网页设定Flash文件背景透明,Flash文件本身做不到. 关键: & ...
- ASP.NET CORE--WIN10上无法单步调试解决方法
参考这篇文章 http://www.cnblogs.com/artech/p/debug-in-vs-code.html In order to be able to debug cross-plat ...
- HDU 1171 Big Event in HDU（多重背包）
Big Event in HDU Problem Description Nowadays, we all know that Computer College is the biggest depa ...
- html5的postmessage实现js前端跨域訪问及调用解决方式
关于跨域訪问.使用JSONP的方法.我前面已经demo过了.详细见http://supercharles888.blog.51cto.com/609344/856886,HTML5提供了一个很强大的A ...