Vue2.0 【第一季】第4节 v-text & v-html

第四节 v-text & v-html

我们已经会在html中输出data中的值了，我们已经用的是{{xxx}},这种情况是有弊端的，就是当我们网速很慢或者javascript出错时，会暴露我们的{{xxx}}，容易引起XSS攻击。Vue给我们提供的v-text,就是解决这个问题的。我们来看代码：

<span>{{ message }}</span>=<span v-text="message"></span><br/>

完整代码是：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>v-text & v-html</title>

    <script type="text/javascript" src="../assets/js/vue.js"></script>

</head>

    <body>

        <h1>v-text & v-html 实例</h1>

        <hr>

        <div id="app">

            <span>{{ message }}</span>=<span v-text="message"></span><br/>

        </div>

        <script type="text/javascript">

            var app = new Vue({

                el:'#app',

                data:{

                    message:'hello Vue!',

                }

            })

        </script>

    </body>

</html>

看一下浏览器效果：

但如果在javascript中写有html标签，用v-text是输出不出来的，这时候我们就需要用v-html标签了。

<span v-html="msgHtml"></span>

双大括号会将数据解释为纯文本，而非HTML。为了输出真正的HTML，你就需要使用v-html 指令。 需要注意的是：在生产环境中动态渲染HTML是非常危险的，因为容易导致XSS攻击。所以只能在可信的内容上使用v-html，永远不要在用户提交和可操作的网页上使用。 完整代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>v-text & v-html</title>

    <script type="text/javascript" src="../assets/js/vue.js"></script>

</head>

    <body>

        <h1>v-text & v-html 实例</h1>

        <hr>

        <div id="app">

            <span>{{ message }}</span>=<span v-text="message"></span><br/>

            <span v-html="dodo"></span>  <!--此方式引起xss攻击-->

        </div>

        <script type="text/javascript">

            var app = new Vue({

                el:'#app',

                data:{

                    message:'hello Vue!',

                    dodo:'<h2>hello world!</h2>'

                }

            })

        </script>

    </body>

</html>

Vue2.0 【第一季】第4节 v-text & v-html的更多相关文章

  1. 分布式压测系列之Jmeter4.0第一季

    1)Jmeter4.0介绍 jmeter是个纯java编写的开源压测工具,apache旗下的开源软件,一开始是设计为web测试的软件,由于发展迅猛,现在可以压测许多协议比如:http.https.so ...

  2. Vue2.0 【第一季】第8节 v-pre & v-cloak & v-once

    目录 Vue2.0 [第一季] 第8节 v-pre & v-cloak & v-once v-pre 指令 v-cloak 指令 v-once 指令 Vue2.0 [第一季] 第8节 ...

  3. Vue2.0 【第一季】第7节 v-bind指令

    目录 Vue2.0 [第一季] 第7节 v-bind指令 第7节 v-bind指令 v-bind缩写 绑定CSS样式 Vue2.0 [第一季] 第7节 v-bind指令 第7节 v-bind指令 v- ...

  4. Vue2.0 【第一季】第6节 v-model指令

    目录 Vue2.0 [第一季] 第6节 v-model指令 第6节 v-model指令 一.一个最简单的双向数据绑定代码: 二.修饰符 三.文本区域加入数据绑定 四.多选按钮绑定一个值 五.多选绑定一 ...

  5. Vue2.0 【第一季】第5节 v-on：绑定事件监听器

    目录 Vue2.0 [第一季] 第5节 v-on:绑定事件监听器 第五节 v-on:绑定事件监听器 一.使用绑定事件监听器,编写一个加分减分的程序. Vue2.0 [第一季] 第5节 v-on:绑定事 ...

  6. Vue2.0 【第一季】第3节 v-for指令：解决模板循环问题

    目录 Vue2.0 [第一季] 第3节 v-for指令:解决模板循环问题 第三节 v-for 指令 一.基本用法: 二.排序 三.对象循环输出 Vue2.0 [第一季] 第3节 v-for指令:解决模 ...

  7. Vue2.0 【第一季】第2节 v-if v-else v-show 指令

    目录 Vue2.0 [第一季]第2节 v-if v-else v-show 指令 第二节 v-if v-else v-show 指令 2.1 v-if指令.v-else指令: 2.2 v-show的使 ...

  8. Vue2.0 【第一季】第1节 走进我的Vue2.0

    目录 Vue2.0 [第一季]内部指令 第一节 走进我的Vue2.0 Vue2.0 [第一季]内部指令 记录一下我的代码地址:D:/Code/Vue 编辑器:VS code 前置知识: 1.HTML的 ...

  9. Vue2.0 【第二季】第7节 Component 组件 props 属性设置

    目录 Vue2.0 [第二季]第7节 Component 组件 props 属性设置 第7节 Component 组件 props 属性设置 一.定义属性并获取属性值 二.属性中带' - '的处理方式 ...

随机推荐

  1. list split批量处理

    <dependency> <groupId>org.apache.commons</groupId> <artifactId>commons-colle ...

  2. Java的简易ATM系统

    大纲   ATM 机系统                   1.注册(账户(系统随机生成 15 位) - 密码(6位) - 余额)                   2.登录            ...

  3. RNA sequence单分子直测技术

    生命组学 按照功能分类遗传物质,可能的分类有系统流.操作流.平衡流等等.下面是使用该理论解释DNA与RNA的关系: DNA和RNA有很大不同,DNA存储遗传信息,作为生命活动的最内核物质,如同操作系统 ...

  4. iphone开发学习之路--基本语法

    关键字:Objective-C(以下简称O-C)是C语言的一个超集,也就是C语言的语法O-C都是兼容的,所以为了避免冲突O-C的关键字都是以@符号开始的,比如:@class.@public .@try ...

  5. 接口测试-chap2-关于重定向

    重定向: 301:资源永久转移 302:资源暂时转移到另一个地址了 1.如果请求接口时发生了重定向,python会自动跟随重定向,对重定向地址发起请求,最后只能得到重定向地址的响应结果.而看不到重定向 ...

  6. SHELL的判断括号区别

    在使用if语句时,经常会使用().(()).[].[[]].{}等括号,如下为几种括号简单区别对比: ( ) 用于多个命令组.命令替换.初始化数组: (( )) 整数扩展.运算符.重定义变量值,算术运 ...

  7. cesium入门示例-3dTiles加载

    数据转换工具采用cesiumlab1.5.17版本,转换后的3dTiles加载显示比较简单,通过Cesium.Cesium3DTileset接口指定url即可,3dTiles文件可与js前端代码放置一 ...

  8. Zabbix-3.0.3实现微信（WeChat）报警

    转自:http://blog.sina.com.cn/s/blog_87113ac20102w7hp.html Zabbix可以通过多种方式把告警信息发送到指定人,常用的有邮件,短信报警方式,但是越来 ...

  9. 谷歌Waymo估值700亿：自动驾驶迎来春天，但前路漫漫

    在经过近一年的法庭之争后,Waymo与Uber的自动驾驶专利权诉讼案于近日宣布和解.最终的结果,是Uber向Waymo支付0.34%股权(目前价值2.44亿美元).但事实上,与Uber的官司解决后,一 ...

  10. django Highcharts制作图表--显示CPU使用率

    Highcharts 是一个用纯JavaScript编写的一个图表库. Highcharts 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表 Highcharts 免费提供给个人学习 ...