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 ...
随机推荐
- 《AngularJS入门与进阶》图书简介
一.图书封面 二.图书CIP信息 图书在版编目(CIP)数据 AngularJS入门与进阶 / 江荣波著. – 北京 : 清华大学出版社, 2017 ISBN 978-7-302-46074-9 Ⅰ. ...
- python自动化开发-3
python里的集合 1.集合的概念 集合(set):把不同的元素组成一起形成集合,是python基本的数据类型.set集合,是一个无序且不重复的元素集合. 2.集合的主要作用 1)去重 举例说明: ...
- UDP学习总结
1.UDP的优势是什么?有哪些典型的应用是使用UDP的?为什么? 2.
- loadrunner 运行脚本-Run-time Settings-ContentCheck简单设置
运行脚本-Run-time Settings-ContentCheck简单设置 by:授客 QQ:1033553122 ContentCheck的设置可用来让VuGen检测存在错误的站点页面.如果被测 ...
- Linux 为linux enterprises 6安装图形桌面教程
为linux enterprises 6安装图形桌面教程 by:授客 QQ:1033553122 安装系统后发现没图形界面,安装Xwindow[为了避免权限不足,以root登录] 步骤1.启动图形界面 ...
- Fit项目图片上传和云存储的调通
项目中关于动作的说明需要相应的配图,这样可以更直观的说明动作要点.本篇主要为项目中动作的新增和编辑做准备,确定适合场景的上传操作逻辑以及图片的存储和加载的方法. 一 上传方案 a) 本来所用的模板中是 ...
- NoHttp封装--03 cookie
NoHttp请求自动维持Cookie: 1.支持Session.Cookie.临时Cookie的位置. 2.支持App重启.关机开机后继续持久化维持. 3.提供了接口,允许开发者监听Coo ...
- redis介绍 （8） window 下redis的集群（cluster命令）
前言: 前段时间我在centos上搭建过一次redis集群,那是借助ruby搭建,这次我介绍一种纯redis集群命令的方式去搭建[最后我会简单介绍ruby搭建]. redis集群搭建(三主三备): 准 ...
- 手把手教你撸一个简易的 webpack
背景 随着前端复杂度的不断提升,诞生出很多打包工具,比如最先的grunt,gulp.到后来的webpack和Parcel.但是目前很多脚手架工具,比如vue-cli已经帮我们集成了一些构建工具的使用. ...
- [20171225]没有备份数据文件的恢复.txt
[20171225]没有备份数据文件的恢复.txt --//别人问的问题,增加了数据文件没有备份,如何恢复,实际上很简单,因为当前控制文件有记录建立时间只要从建立数据文件开始的--//归档日志都存在恢 ...