{{ }}

将元素当成纯文本输出

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的更多相关文章

  1. EditControl 限制输入文本的三种方法

    下边是三种限制编辑框输入内容的方法.在VS里建立基于对话框的应用程序CMyEdit,打开资源视图,删除对话框上自带的确定和取消按钮.然后添加一编辑框控件,将其ID修改为IDC_MY_EDIT,通过类向 ...

  2. Vue全局组件创建三种方法

    <my-com1></my-com1> <my-com2></my-com2> <template id="tmp1"> ...

  3. vue后台管理项目中菜单栏切换的三种方法

    第一种方法:vue嵌套路由(二) <el-menu :default-active="defaultActive" style="min-height: 100%; ...

  4. vue自定义指令,比onerror更优雅的方式实现当图片加载失败时使用默认图,提供三种方法

    首先,来看下效果图(演示一下图片正常加载与加载失败时的效果) 在线体验地址:https://hxkj.vip/demo/vueImgOnerror/ 一.常规方法解决 我们都知道,img标签支持one ...

  5. vue中组件的四种方法总结

    希望对大家有用 全局组件的第一种写法 html: <div id = "app"> <show></show></div> js: ...

  6. 黑马vue---56-58、vue组件创建的三种方式

    黑马vue---56-58.vue组件创建的三种方式 一.总结 一句话总结: 不论是哪种方式创建出来的组件,组件的 template 属性指向的模板内容,必须有且只能有唯一的一个根元素 1.使用 Vu ...

  7. 服务器文档下载zip格式 SQL Server SQL分页查询 C#过滤html标签 EF 延时加载与死锁 在JS方法中返回多个值的三种方法(转载) IEnumerable,ICollection,IList接口问题 不吹不擂,你想要的Python面试都在这里了【315+道题】 基于mvc三层架构和ajax技术实现最简单的文件上传 事件管理

    服务器文档下载zip格式   刚好这次项目中遇到了这个东西,就来弄一下,挺简单的,但是前台调用的时候弄错了,浪费了大半天的时间,本人也是菜鸟一枚.开始吧.(MVC的) @using Rattan.Co ...

  8. 三种方法教你HTML实现点击某一个元素之外触发事件

    HTML实现点击某一个元素之外触发事件 大致编写的HTML界面渲染后是这个样子的,我们现在想要实现的需求是点击Button所在的div不会触发事件,而在点击Button所在的div之外的区域时会触发事 ...

  9. Linux 添加开机启动项的三种方法

    linux 添加开机启动项的三种方法. (1)编辑文件 /etc/rc.local 输入命令:vim /etc/rc.local 将出现类似如下的文本片段: #!/bin/sh## This scri ...

随机推荐

  1. React 入门学习笔记整理(七)—— 生命周期

    (1)react 生命周期 只有类组件有生命周期,函数组件没有生命周期 1.挂载阶段:这些方法会在组件实例被创建和插入DOM中时被调用: 1)constructor(props) 初始化组件的状态.绑 ...

  2. 从零开始学习html(八)CSS选择器——下

    六.子选择器 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" ...

  3. 《数据库系统概念》11-扩展的E-R特性

    ​虽然基本的E-R特性可以应对大部分数据库建模,但为了使用方便,也提供扩展的E-R特性 一.特化Specialization有时一个实体集会保护若干子集,这些子集各自具有不同的属性.比如person可 ...

  4. [Q&A] 解决 SBT 初始化或下载 jar 包速度慢的问题

    原文地址:https://www.cnblogs.com/memento/p/9153012.html 在 C:\Users\用户名\.sbt 目录下添加一个 "repositories&q ...

  5. JavaWeb:Listener和Filter

    本文内容: Listener Filter 首发日期:2018-07-15 Listener 监听器Listener负责监听事件的发生.我们能在事件发生后执行一些自定义的操作,这就是监听器的意义. 监 ...

  6. [20171120]11g select for update skip locked.txt

    [20171120]11g select for update skip locked.txt --//11G在select for update遇到阻塞时可以通过skipped locked跳过阻塞 ...

  7. JMeter—配置元件(七)

    参考<全栈性能测试修炼宝典JMeter实战>第六章 JMeter 元件详解中第二节配置元件JMeter配置元件可以用来初始化默认值和变量,以便后续采样器使用.将在其作用域的初始化阶段处理. ...

  8. openldap系列

    openldap系列 阅读视图 系列介绍 openldap系列目录 1. 系列介绍 本系列文档大部分来自于郭大勇老师的<OpenLDAP实战指南>,少部分来自于互联网.所有文档均已经过本人 ...

  9. 洗礼灵魂,修炼python(24)--自定义函数(5)—匿名函数lambda

    在这个互联网时代,大家都喜欢匿名,匿名上网,匿名登录,匿名操作等等,都不喜欢实名对吧?(虽然说现在实名制已经快到来,题外话,扯远了),当然python里也有个不喜欢实名的,它的功效优点特殊,说强大吧? ...

  10. Source Insight 查找的选择项

    查找参数:whole words only :                  全字匹配查找case sensitive  :                   区分大小写project wide ...