小荣记事本
基于vue.js实现的记事本
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小荣记事本</title>
</head>
<link rel="stylesheet" type="text/css" href="css/aui.css"/>
<body>
<!-- 功能
1、新增 √
2、删除 √
3、统计 √
4、清空 √
5、隐藏 -->
<div id="app">
<div class="header">
<h1 style="text-align: center;color: darkgoldenrod;">小荣记事本</h1>
</div>
<div class="main">
<ul>
<li><input type="text"placeholder="请输入任务" v-model="message" @keyup.enter="submit">
<li v-for="(item,index) in array">{{index+1}}-----{{item}} <i class="aui-iconfont aui-icon-close" style="float: right;" @click="remove(index)"></i>
</li>
</ul>
</div>
<div class="bottom">
<span style="float: left;" v-show="array.length!=0">{{count+" items"}}</span>
<span style="float: right;" @click="clear" v-show="array.length!=0">Clear</span>
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="js/api.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var app=new Vue({
el:"#app",
data:{
message:"",
count:0,
array:[],
},
methods:{
submit:function()
{this.array.push(this.message);
this.count++;
},
clear:function()
{this.count=0;
this.array.splice(0,this.array.length);
},
remove:function(index)
{this.array.splice(index,1);
this.count--;
}
}
})
</script>
<style type="text/css">
body{
background-color: gray;
}
#app{
background-color: white;
width: 300px;
height: 500px;
margin: auto;
margin-top: 100px;
}
.main{
width: 300px;
height: 410px;
}
ul li
{list-style: none;
}
</style>
</html>
508
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
