<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#mask {
width: 300px;
height: 400px;
background-color: rgb(238, 238, 238);
text-align: center;
margin: 50px auto;
}
input {
outline: none;
width: 260px;
height: 40px;
border: 1px solid #ccc;
padding-left: 5px;
}
p {
font-size: 20px;
padding: 30px 0 20px 0;
}
ul>li {
position: relative;
width: 260px;
height: 30px;
border: 1px solid #ccc;
border-top: 0;
margin: 0 auto;
text-align: left;
line-height: 30px;
padding-left: 5px;
list-style: none;
}
.glyphicon {
display: none;
position: absolute;
top: 8px;
right: 10px;
}
ul>li:hover .glyphicon {
display: block;
}
.sum {
width: 260px;
height: 30px;
border: 1px solid #ccc;
border-top: 0;
margin: -10px auto;
padding: 0 8px;
line-height: 30px;
}
.sum>.left {
float: left;
}
i {
float: left;
font-style: normal;
font-size: 10px;
line-height: 32px;
}
.sum>.right {
float: right;
font-size: 10px;
}
</style>
<body>
<div id="mask">
<p>记事本</p>
<div class="max">
<input type="text" v-model="inputValue" placeholder="请输入内容" @keyup.enter="add">
<ul>
<li v-for="(i,index ) in lis"> {{index+1+'. '}} {{ i }}
<span class="glyphicon glyphicon-remove" @click="remove(index)"></span>
</li>
</ul>
<div class="sum" v-show="lis.length!=0">
<span class="left"> {{ lis.length }}. </span><i>items left</i>
<span class="right" @click="clear">clear</span>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<script>
var mast = new Vue({
el: "#mask",
data: {
lis: ["吃饭", "睡觉", "打豆豆"],
inputValue: "好好学习，天天向上",
isShow: true
},
methods: {
add: function() {
this.lis.push(this.inputValue);
},
remove: function(index) {
this.lis.splice(index, 1);
},
clear: function() {
this.lis = [];
},
}
})
</script>
</body>