v-html | 数据内容包含元素标签或者样式
问题
如果我们展示的数据包含元素标签或者样式，我们想展示标签或样式所定义的属性作用，该怎么进行渲染
插值表达式{{}}和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>
解决方法
对此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>
v-html | 数据内容包含元素标签或者样式的更多相关文章
- 从a标签为什么不能包含div标签-了解HTML5元素分类与内容模型
我们知道按新的 HTML 规范,已经不按 inline 和 block 来区分元素类型了.所以我们在a标签里面使用div标签时候会发现a标签并不能通过改变css盒子模型的方式将div元素包含. 元素分 ...
- js清除节点内容（改变标签元素）
<!DOCTYPE HTML><html> <head> <meta http-equiv="Content-Type" c ...
- 第一百六十六节，jQuery，基础 DOM 和 CSS 操作，元素内容，元素属性，css和class，元素宽度高度、偏移、滚动条
jQuery,基础 DOM 和 CSS 操作,元素内容,元素属性,css和class,元素宽度高度.偏移.滚动条 学习要点: 1.DOM 简介 2.设置元素及内容 3.元素属性操作 4.元素样式操作 ...
- HTML 5的革新之一：语义化标签一节元素标签。
摘至于:<HTML 5的革新——语义化标签(一)> HTML 5的革新之一:语义化标签一节元素标签. 在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义.(即 ...
- /.nav-tabs :是普通标签页 .nav-pills:胶囊式标签页 action ;默认的激活项，给<li>加默认显示的是哪个标签页内容 .nav是标签页的一个基类，给ul加 .nav-stacked: 垂直排列BootStrap
<meta name="viewport" content="with=device-width, initial-scale=1, user-scalabe=no ...
- 【必杀】为应用程序池“XXX”提供服务的进程在与 Windows Process Activation Service 通信时出现严重错误。该进程 ID 为“XXXX”。数据字段包含错误号。
之前写过一篇文章,https://www.cnblogs.com/qidian10/p/6028784.html 解释如何解决此类问题,但现在回过头来想一下,之前的文章还是太过浅显,无法完全有效的彻底 ...
- 面试小记---外部脚本必须包含 <script> 标签吗？
外部脚本必须包含 <script> 标签吗? 答案是否定的. 身为小白的我一开始也是以为这句话的对了,因为本来嘛,引用外部脚本不都用的是<script>标签中的src属性吗.所 ...
- jquery内容选择器（根据内容匹配元素）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- GZip压缩的js文件IE6下面不能包含<script>标签
IE6下面,GZip压缩的js文件,如果js中包含<script>标签,一遇到这样的标签,后面的内容居然都截断了,狂晕! 花了我一个晚上来找原因.. 需要将字符串'<script&g ...
随机推荐
- django2获取url所有路径
根据原文链接:https://segmentfault.com/a/1190000017378464,整理 第一步:先导入项目根的urls.py路径 from ceshiproject import ...
- css Table 表格宽度失效解决方案
使用div包裹内容进行支撑 <table cellspacing="0"> <caption>89 HOLLAND ROAD SINGAPORE 27575 ...
- 定要过python二级 第10套
第一部分 第一题 1. int* 字符串 =几个东西 2. 此题的最开始的疑惑 (1)01 02 03 怎么产生 for 循环 (2)<<< 这个怎么产生 (3)<这个&l ...
- python二级 第七套
第一部分 基本操作 第一题 1.format() 故名思意 就是格式化什么东西.所以你就是将你 需要格式化的东西 放在里面就行了 . format(s) 对s 有要求 就是 int(s) ...
- 浅聊Linux的五种IO模型
在日常 Coding 中,多多少少都会接触到网络 IO,就会想要深入了解一下.看了很多文章,总是云里雾里的感觉,直到读了<UNIX网络编程 卷1:套接字联网API>中的介绍后,才豁然开朗. ...
- PolarDB PostgreSQL DDL同步原理
概述 在共享存储一写多读的架构下,数据文件实际上只有一份.得益于多版本机制,不同节点的读写实际上并不会冲突.但是有一些数据操作不具有多版本机制,其中比较有代表性的就是文件操作.多版本机制仅限于文件内的 ...
- aizhan查询旁IP网站脚本
<?php print_r("-------------------------\r\n"); print_r("-------爱站旁站查询------\r\n&q ...
- 【k8s】使用k8s部署一个简单的nginx服务
名词解释 Namespace 表示命名空间 Deployment 表示pod发布 Service 表示多个pod做为一组的集合对外通过服务的表示 kubectl 是k8s的命令行操作命令,可以创建和更 ...
- xLua自定义加载器
xLua入门基础 环境配置 github下载xLua文件: xLua是腾讯开发,据说比较先进: 下载下来后将Plugins和XLua文件夹考进项目: Plugins多平台权限:XLua和C#交互: t ...
- 好好编程BUAA_SE（组/团队） Scrum Meeting 博客汇总
好好编程BUAA_SE(组/团队) Scrum Meeting 博客汇总 一.Scrum Meeting 1. Alpha Alpha阶段 第一次Scrum Meeting Alpha阶段 第二次Sc ...