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 ...
随机推荐
- JavaScript长时间未操作自动退出登录
主要是通过mouseover 来监听有没有进行当前页面操作,通过未操作时间和设定退出的时间做比较,从而退出登录. var oldTime = new Date().getTime(); var new ...
- 【redis专题(5)】命令语法介绍之sets
标签(空格分隔): Redis 关于 redis的无序集合有三个特点: 无序性, 确定性(描述准确) , 唯一性: 有点类似于数据容器: 增 SADD key member1 [member2] 作用 ...
- 使用wxpy自动发送微信消息
思路整理:1.进入心灵鸡汤网页,使用python获取心灵鸡汤内容 2.登陆微信,找到需要发送的朋友 3.发送获取的内容 1.获取心灵鸡汤的内容 如下图,获取第一条鸡汤 实现如下: 2.登陆微信,搜索朋 ...
- 洗礼灵魂，修炼python（27）--异常处理（1）—>了解异常
python学到这,其实你应该是在入门到进阶的中间阶段了,但是还没有到进阶的阶段的,这是肯定的,因为进阶得可以从实际问题中解决问题的,比如写一个自动化的爬虫程序啊,对一件事物作大数据归纳分析,开发一个 ...
- Android中SELinux的TE简介【转】
转自:https://blog.csdn.net/murphykwu/article/details/52457667 selinux的概念如上一篇链接所示: http://www.cnblogs.c ...
- dell r420 H310/H810阵列配置教程及常见问题
进入H310/H810阵列卡BIOS界面 阵列卡管理快捷键 如何创建RAID0和RAID1和RAID5 阵列修复篇 Foreign(外来)状态的硬盘应如何处理 1.进入H310/H810阵列卡BIOS ...
- PLS-00306: 调用 'SYNCRN' 时参数个数或类型错误
System.Data.OracleClient.OracleException (0x80131938): ORA-00604: 递归 SQL 级别 1 出现错误 ORA-06550: 第 1 行, ...
- python使用关键字爬取url
python网路爬虫 --------- 使用百度输入的关键字搜索内容然后爬取搜索内容的url 开发环境:windows7+python3.6.3 开发语言:Python 开发工具:pycharm 第 ...
- Linux 小知识翻译 - 「桌面环境」
这次聊聊桌面环境. 上次聊了 X Window System 相关的内容,虽然令人意外,但X Window System 和桌面环境不是一回事.请大家稍微考虑一下. X Window System 是 ...
- Java计模模式之六 ----- 组合模式和过滤器模式
前言 在上一篇中我们学习了结构型模式的外观模式和装饰器模式.本篇则来学习下组合模式和过滤器模式. 组合模式 简介 组合模式是用于把一组相似的对象当作一个单一的对象.组合模式依据树形结构来组合对象,用来 ...