{{ }}

将元素当成纯文本输出

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. GDAL获取投影坐标系注意问题

    GDAL提供了获取投影坐标系的C函数GDALGetProjectionRef以及对应的C++函数GetProjectionRef, 但在获取投影坐标系之前需要设置通过CPLSetConfigOptio ...

  2. Salesforce的翻译工作台

    翻译工作台 Salesforce提供了翻译工作台.在这里管理员可以对各种数据进行翻译设置,包括对象信息.字段信息.验证规则.错误信息等. 翻译工作台集中了翻译的内容,从而使得管理员或开发者不需要在其他 ...

  3. 阿里SopHix热修复框架

    2015年以来,Android开发领域里对热修复技术的讨论和分享越来越多,同时也出现了一些不同的解决方案,如QQ空间补丁方案.阿里AndFix以及微信Tinker(Bugly sdk也集成Tikner ...

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

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

  5. C#获取H5页面上传图片代码

    基于上一篇的H5压缩上传图片,由于图片是以二进制字符流blob的形式传过来的,所以应该想将其转成bytes类型再进行转换 public void ProcessRequest(HttpContext ...

  6. 精通initramfs构建step by step

    (一)hello world  一.initramfs是什么  在2.6版本的linux内核中,都包含一个压缩过的cpio格式 的打包文件.当内核启动时,会从这个打包文件中导出文件到内核的rootfs ...

  7. CSS：float: right 靠右换行的解决方法

    1.float: right的使用用法:使用html代码<span style="float: right">*****</SPAN>,其中*****就是你 ...

  8. Windows：添加、删除和修改静态路由

    添加一条路由 route add 删除一条路由 route add -p #作用同上,只是这是一条永久路由,不会因为重启机器而丢失.  注意:如果有两条路由记录有着相同的“目的网络号”,则会将两条记录 ...

  9. SAP SQVI 快速浏览器

    SQVI可向SQL一样连接多个表浏览数据. 1.输入T-CODE:SQVI. 2.新建一个新查询case 输入CASE 名.点击新建,在弹出的窗口中输入标题,在数据源中可选择单个表查询,或者选择表连接 ...

  10. 改变javascript函数内部this指针指向的三种方法

    在查了大量的资料后,我总结了下面的三条规则,这三条规则,已经可以解决目前我所遇到的所有问题.规则0:函数本身是一个特殊类型,大多数时候,可以认为是一个变量. function a() { alert( ...