<!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输出什么数据
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
