本帖最后由 Dexlux 于 2021-3-24 18:00 编辑
[HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
h1 {
margin-top: 100px;
text-align: center;
}
#app {
width: 300px;
margin: 20px auto 0;
border: 1px solid #ccc;
box-shadow: 10px 10px #ccc;
}
input {
margin: 0 auto;
display: block;
width: 300px;
height: 40px;
}
.history {
margin: 0 auto;
width: 300px;
height: 40px;
line-height: 40px;
padding-left: 10px;
border: 1px solid #ccc;
border-top: none;
color: rgb(90, 89, 89);
}
.history a {
display: none;
}
.history:hover a {
float: right;
padding-right: 10px;
font-size: 12px;
text-decoration: none;
color: rgb(90, 89, 89);
display: block;
}
.caozuo {
position: relative;
margin: 0 auto;
width: 300px;
height: 20px;
font-size: 12px;
color: #aaa;
}
.a {
display: inline-block;
position: absolute;
left: 0;
bottom: 0;
}
.b {
display: inline-block;
position: absolute;
right: 10px;
bottom: 0;
cursor: pointer;
}
</style>
</head>
<body>
<h1>日程表</h1>
<div id="app">
<input type="text" v-model="message" @keyup.enter="add" placeholder="输入日程">
<div class="history" v-for="(item,index) in arr">
{{ index+1 }} {{arr[index]}}
<a href="javascript:;" @click="del(index)">删除此项</a>
</div>
<div class="caozuo" v-show="arr.length!=0">
<div class="a">{{arr.length}} items left</div>
<div class="b" @click="clear">Clear</div>
</div>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
arr: [],
message: ''
},
methods: {
clear: function () {
this.arr = [];
},
add: function () {
this.arr.push(this.message);
this.message = '';
},
del: function (index) {
this.arr.splice(index, 1);
}
}
})
</script>
</html> | 
发表于 2021-3-7 21:51
|
发表于 2021-3-15 16:35
