VUE一个丑丑的记事本
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>=-=</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<style>
*{
padding: 0px;
margin: 0px;
}
p{
color: white;
font-size: 20px;
}
#div{
position: relative;
top: 50%;
left: 40%;
width: 400px;
height: 700px;
background-size: 400px;
}
#imgbackground{
position: absolute;
left: 40%;
width: 400px;
height: 700px;
}
#div header{
height:80px;
text-align: center;
}
#div footer{
width:400px;
position: absolute;
top: 650px;
height:20px;
text-align: center;
}
#div h1{
color: white;
}
#div input,li{
border: 1px;
border-style: solid;
border-color: gainsboro;
width: 300px;
height: 40px;
left: 10%;
text-align: center;
position: relative;
background-color: white;
}
#div ol{
}
#p{
color: black;
font-size: 30px;
position: relative;
}
#button{
background-image: url(img/删除.png);
background-size: 18px;
width: 20px;
height: 20px;
border: none;
cursor: pointer;
position: absolute;
top:10px ;
left: 270px;
}
#chooseImg{
background-color: aliceblue;
position: absolute;
left: 67%;
top: 20%;
width: 400px;
height: 500px;
}
.littleImg{
width: 100px;
height: 150px;
}
#chooseImg ul li{
width: 100px;
height: 150px;
margin: 20px;
float:left;
}
#
</style>
<img id="imgbackground" :src="src" />
<div id="div">
<header id="header">
<h1>记事本</h1>
</header>
<section id="section">
<input type="text" id="input" value="请输入" v-model="message" @keyup.enter="addMessage(message)" />
<ol>
<li class="li" v-for="(event,index) in events" v-if="isTrue" >
<p id="p">{{event}}</p>
<button id="button" @click="delLi(index)" ></button>
</li>
</ol>
</section>
<footer id="footer">
<p id="p2">{{events.length}}</p>
</footer>
</div>
<div id="chooseImg">
<a href="javascript:void(0)" @click="pageSub()"><img src="img/prev.png"></a>
<a href="javascript:void(0)" @click="pageAdd()"><img src="img/next.png"></a>
<ul id="page1">
<li class="imgli" v-for="(img,index) in imgs[imgindex]" >
<img class="littleImg" :src="img" @click="imgChange(img)" /></li>
</ul>
</div>
<script>
</script>
<script>
var vue1 = new Vue({
el:"#div",
data:{
events:['你好！'],
message:"请输入",
isTrue: true,
isDel:false,
button:"button",
},
methods:{
addMessage(message){
this.events.push(this.message);
},
delLi(index){
this.events.splice(index,1)
},
delAppear(){
this.isDel = !this.isDel
},
},
})
var vue2 = new Vue({
el:"#chooseImg",
data:{
imgs:[["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg"],["img/5.jpg","img/6.jpg"]],
imgindex:0,
},
methods:{
pageSub(){
if(this.imgindex>0)
this.imgindex--
},
pageAdd(){
if(this.imgindex<1)
this.imgindex++
},
imgChange(img){
vue3.src=img
}
}
})
var vue3 = new Vue({
el:"#imgbackground",
data:{
src:"img/1.jpg",
}
})
</script>
</body>
</html>
土土的记事本
874
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
