<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>登录注册</title>
<script src="./javascript/vue.min.js"></script>
<style>
img {
border: 10px solid greenyellow;
height: 50px;
width: 50px;
display: block;
}
</style>
</head>
<body>
<div id="whole" v-bind:style="ceshi">
<div id="leftimag"><img src="./imags/lunbo01.jpg" /></div>
<div id="right">
<div id="qiehuan">
<div id="deng" v-bind:style="mystyle">登录</div>
<div id="zhu" v-bind:style="yourstyle">注册</div>
</div>
</div>
</div>
<script>
//这里要实现一个与数据库中数据比对的功能
var whole = new Vue({
el: "#right",
});
var dengzhu = new Vue({
el: "#qiehuan",
data: {
mystyle: {
backgroundColor: "pink",
},
yourstyle: {
backgroundColor: "green",
},
},
});
</script>
</body>
</html>
为什么el:"right",后,那部分内容在页面上消失了 但是el:“qiehuan”不会消失