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. 在virtualenv中安装NumPy、 SciPy、 scikit-learn、 matplotlib

    首先要进入对应的虚拟环境 然后安装包    这里把安装源改成使用豆瓣的源进行下载  这样的话 下载速度会快很多   安装numpy包 pip install numpy -i https://pypi ...

  2. VisionPro连接Dalsa线扫相机

    1 环境配置 硬件:编码器(提供编码信号的PLC) 线扫相机 镜头 相机线缆 图像采集卡(Dalsa_Xcelera-CL_PX4 Dual) 软件:VisionPro 8.2 VisionPro软件 ...

  3. docker pull很慢解决办法

    经常拉取镜像的时候很慢或者拉不下来,这里可以使用阿里云镜像加速器,然后试试看有没有效果. ##使用阿里云镜像加速器 [root@localhost ~]# mkdir -p /etc/docker [ ...

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

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

  5. angular jspaf

    import { Component, OnInit } from '@angular/core'; import * as jsPDF from 'jspdf'; import html2canva ...

  6. 微软Project Oxford帮助开发人员创建更智能的应用

    Oxford帮助开发人员创建更智能的应用" title="微软Project Oxford帮助开发人员创建更智能的应用"> 假设你是一名对关于健身的应用充满奇思妙想 ...

  7. Java 去掉字符串中的重复数据

    有一组字符串比如 北京,北京,上海,上海,上海,武汉-------->要得到        北京,上海,武汉 怎么去掉里面重复的字符串? function DelRepetStr(String ...

  8. 使用 JavaScript 创建并下载文件

    先上代码 Blob 对象 Blob URLs 模拟 click 小结 参考 本文将介绍如何使用 JavaScript 创建文件,并自动/手动将文件下载.这在导出原始数据时会比较方便. 先上代码 /** ...

  9. BTCU(高校区块链联盟)-联盟链第6讲作业

    // payment project main.go package main import ( "fmt" "strconv" "github.co ...

  10. SpringBoot 处理 POST Json 传参枚举

    在 Spring 框架中对枚举类型的序列化/反序列化是有限制的. 假设如下面这样在某些情况下就不能正常工作: 123456789 public enum PayChannelEnum implemen ...