首页 > 代码库 > vue.js 2.x 版本script里面的dom被过滤，从而获取不到dom字符串的解决方案

vue.js 2.x 版本script里面的dom被过滤，从而获取不到dom字符串的解决方案

2024-09-07 14:45:31   216人阅读

做项目中 vue.js 在1.x版本切换的到2.x版本的时候遇到了一个问题就是说，1.x版本实例化之后 script 里面的dom 字符串不会被过滤掉，但是2.x版本之后就会被过滤例如：

1.x 版本被实例化之后的script 内容

技术分享

 

2.x 版本被实例化之后的script 内容

技术分享

 

这样我们在获取 id="sh" 内容的时候就无法获取到dom结构，很多时候我们想使用这些dom结构，怎么办呢？

于是乎，经过测试及文档的查看，考虑到了，那么如果还没被完全实例化之后，我们就去获取它，这样我们就能拿到还没被过滤的DOM了吧？

是的 created 方法，于是有了下面的代码完成了。

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div class="app">
    
    <script type="text/x-template" id="sh">
        <div>
            <h1>1111</h1>
            <p>{{msg}}</p>
        </div>
    </script>

    <button @click="setData">审核</button>

</div>
<script src="jquery.min.js"></script>
<script src="vue.min.2.x.js"></script>
<script>

    
    new Vue({
        el : ‘.app‘,
        data : {
            msg : null,
            shHtml : null
        } ,
        created : function(){
            this.getScriptDomStr();
        } ,
        methods : {
            getScriptDomStr : function(){
                this.shHtml = document.getElementById(‘sh‘).innerHTML
            },
            setData : function(){
                $(‘.app‘).append(‘<div id="tpl"></div>‘)
                var _self = this;
                new Vue({
                    el : ‘#tpl‘,
                    data : {
                        msg : 200
                    } ,
                    template : _self.shHtml
                })

            }
        }
    })

</script>
</body>
</html>

 

vue.js 2.x 版本script里面的dom被过滤，从而获取不到dom字符串的解决方案


联系
我们