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. Weave实现跨主机容器互联

    安装与启动 直接从github下载二进制文件安装. docker_host1(服务器1): 下载weave # sudo wget -O /usr/local/bin/weave https://ra ...

  2. [LC] 74. Search a 2D Matrix

    Write an efficient algorithm that searches for a value in an m x n matrix. This matrix has the follo ...

  3. FastJson的学习之JSON互相转Map集合，List集合，JavaBean

    https://blog.csdn.net/weixin_36910300/article/details/79182120 创建两个实体类 一个是部门类,一个是部门员工类 部门员工类 public ...

  4. leetCode-nSum

    Given an array S of n integers, are there elements a, b, c, and d in S such that a + b + c + d = tar ...

  5. python 前端技术

    生活中浏览器就是一个客户端,根据搜索内容向不同的服务器发送请求,但是显示最终页面后与请求的服务器断开,想再次看到搜索内容时需要重新连接. 服务端: import socket def handle_r ...

  6. 我们一起学React Native(一)：环境配置

    最近想在项目中实现跨平台,对比一下主流的实现方式,选用了React Native.参考网上的教程,对于一直都是原生移动端开发,对前端的知识不是很了解的,感觉入门不是特别简单.于是打算把学习React ...

  7. numpy的基础计算2

    import numpy as np A = np.arange(14,2,-1).reshape((3,4)) #平均值 print(np.mean(A)) print(A.mean()) prin ...

  8. O2O疯狂烧钱路：止血还是放血好

    在国内,无论是互联网巨头还是创业者,很多都将O2O领域当做下一个金矿.而对于很多O2O项目来说,市场规模.用户基数.发展潜力等传统指数依然被当做硬性指标.而为了抢夺用户,很多O2O项目都只能疯狂烧钱, ...

  9. 蚂蚁金服招聘-无线测试开发（20k-36k/月）

    蚂蚁金服-支付宝国际事业部-高级测试开发工程师/测试专家 工作年限:三年以上学历要求:本科期望层级:P6/P7工作地点:上海,杭州,深圳等为什么选择加入我们? 我们的岗位有何不同?1.国际化远景:随着 ...

  10. O2O倒逼汽车行业改革：服务超越销售成重心

    汽车作为越来越普及的出行工具,已经进入千家万户.与其他家具.家电.服饰等产品不同,从新车销售到售后保养.保险购买.维修乃至报废阶段,都能细分化,形成一个个潜力巨大的垂直领域.而随着互联网元素的渗入,汽 ...