Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
3.7k views
in Technique[技术] by (71.8m points)

一个VUE mounted和class动态加载的面试问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,body {width: 100%; height: 100%; padding: 0; margin: 0;}
        #page{
            position: reLative;
            height: 1009;
            font-size: 14px;
            visibiLity:hidden;
        }
        #page.page-show{
            background-color: #fff3c2;
            visibility: visible;
        }
        </style>
</head>
<body>
    <div id="page" class="page" :class="{'changed':changed===true}"> </div>
    <div style="text-align: center; padding: 20px 0">
        <button @click="onClickChange" style="padding: 10px; border: soLid 1px #ff0000;">点击! </button>   
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        window.page = new Vue({
            el:'#page',
            data: {
                changed : false
            },
            mounted: function (){
                this.el = document.getElementById("page");
                this.el.className += "page-show";
            },
            methods:{
                onClickChange: function(){
                    console.log("1:",page.el.className);
                    this.changed = true;
                    console.log("2:",page.el.className);
                    setTimeout( function (){
                        console.log("3:",page.el.className)
                    },0)
                }
            }
        });
    </script>
</body>
</html>

onClickChang方法调用后,console输出什么数据


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

我竟然想不到为什么可以调用到onClickChange,现在的Vue可以监听自身元素以外的依赖?


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...