Vue-Vue文本渲染三种方法 {{}}、v-html、v-text
{{ }}
将元素当成纯文本输出
v-html
v-html会将元素当成HTML标签解析后输出
v-text
v-text会将元素当成纯文本输出
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue文本渲染三种方法</title>
</head>
<body>
<div id="app">
<!-- {}}/v-text不能解析html元素，只会照样输出 -->
<p>{{hello}}</p>
<p v-text = 'hello'></p>
<p v-html = 'hello'></p>
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
hello:'<span>hello world</span>'
}
})
</script>
</html>
运行结果：
Vue-Vue文本渲染三种方法 {{}}、v-html、v-text的更多相关文章
- EditControl 限制输入文本的三种方法
下边是三种限制编辑框输入内容的方法.在VS里建立基于对话框的应用程序CMyEdit,打开资源视图,删除对话框上自带的确定和取消按钮.然后添加一编辑框控件,将其ID修改为IDC_MY_EDIT,通过类向 ...
- Vue全局组件创建三种方法
<my-com1></my-com1> <my-com2></my-com2> <template id="tmp1"> ...
- vue后台管理项目中菜单栏切换的三种方法
第一种方法:vue嵌套路由(二) <el-menu :default-active="defaultActive" style="min-height: 100%; ...
- vue自定义指令，比onerror更优雅的方式实现当图片加载失败时使用默认图，提供三种方法
首先,来看下效果图(演示一下图片正常加载与加载失败时的效果) 在线体验地址:https://hxkj.vip/demo/vueImgOnerror/ 一.常规方法解决 我们都知道,img标签支持one ...
- vue中组件的四种方法总结
希望对大家有用 全局组件的第一种写法 html: <div id = "app"> <show></show></div> js: ...
- 黑马vue---56-58、vue组件创建的三种方式
黑马vue---56-58.vue组件创建的三种方式 一.总结 一句话总结: 不论是哪种方式创建出来的组件,组件的 template 属性指向的模板内容,必须有且只能有唯一的一个根元素 1.使用 Vu ...
- 服务器文档下载zip格式 SQL Server SQL分页查询 C#过滤html标签 EF 延时加载与死锁 在JS方法中返回多个值的三种方法（转载） IEnumerable,ICollection,IList接口问题 不吹不擂，你想要的Python面试都在这里了【315+道题】 基于mvc三层架构和ajax技术实现最简单的文件上传 事件管理
服务器文档下载zip格式 刚好这次项目中遇到了这个东西,就来弄一下,挺简单的,但是前台调用的时候弄错了,浪费了大半天的时间,本人也是菜鸟一枚.开始吧.(MVC的) @using Rattan.Co ...
- 三种方法教你HTML实现点击某一个元素之外触发事件
HTML实现点击某一个元素之外触发事件 大致编写的HTML界面渲染后是这个样子的,我们现在想要实现的需求是点击Button所在的div不会触发事件,而在点击Button所在的div之外的区域时会触发事 ...
- Linux 添加开机启动项的三种方法
linux 添加开机启动项的三种方法. (1)编辑文件 /etc/rc.local 输入命令:vim /etc/rc.local 将出现类似如下的文本片段: #!/bin/sh## This scri ...
随机推荐
- 安卓开发_浅谈Notification（通知栏）
Notification通知栏是显示在手机状态的消息,代表一种全局效果的通知 快速创建一个Notification的步骤简单可以分为以下四步: 第一步:通过getSystemService()方法得到 ...
- 使用apksigner对apk进行v2签名
最近进行三方安全测试,剩最后一个问题: 原因是我用360加固宝之后,又用了360Signer对apk进行二次签名,而360Signer是用v1方式对apk进行签名的,所以安全检测还是不通过. 下面给出 ...
- Android View体系（七）从源码解析View的measure流程
前言 在上一篇我们了解了Activity的构成后,开始了解一下View的工作流程,就是measure.layout和draw.measure用来测量View的宽高,layout用来确定View的位置, ...
- JMeter—监听器(十二)
参考<全栈性能测试修炼宝典JMeter实战>第六章 JMeter 元件详解中第七节监听器用来显示JMeter取样器的测试结果,能够以树.表.图形形式显示,也可以以文件方式保存. 一.设置默 ...
- Excel快捷键大全 Excel2013/2010/2007/2003常用快捷键大全
一个软件最大的用处是提高工作效率,衡量一个软件的好坏,除了是否出名之外,最主就是能否让一个新手更快的学会这个软件和提高工作速度.就拿Excel表格来说吧,平常办公中我们经常会用它来制作表格,统计数据或 ...
- [cb]扩展Hierarchy 添加二级菜单
目地 这篇博客教大家如何扩展Hierarchy 默认的Hierarchy 在Unity的Edior编辑器中,默认的Hierarchy如下 扩展的Hierarchy 扩展示例 MyInitOnLoad脚 ...
- Emacs中使用shell（调出terminal）
在Emacs中使用shell(调出terminal) 方法: M-x eshell 注意:不能使用 M-x shell,这样调用的是 cmd命令,一些命令无法使用
- zabbix使用自定义脚本监控内存
我这里的脚本是监控centos7系统的内存.centos7系统的内存如何查看我之前的博客都是有的.这里直接写了监控步骤 1.首先是编写脚本. #!/bin/bash mem_total(){ TOTA ...
- 17LaTeX学习系列之---LaTeX的版面设计
目录 目录 前言 (一)基础知识 1.纸张大小的设置 2.边距的设置 3.页眉页脚的设置 4.横分割线的设置 5.行间距与段间距 (二)实例 1.源代码 2.输出效果: 目录 本系列是有关LaTeX的 ...
- python scrapy爬虫框架概念介绍(个人理解总结为一张图)
python的scrapy是一个为了爬取网站数据,提取结构性数据而编写的应用框架 python和scrapy的安装就不介绍了,资料很多 这里我个人总结一下,能更加快理解scrapy和快速上手一个简 ...