p19本地应用-记事本-新增
1、生成列表结构 (v-for 数组) 2、获取用户输入(v-model) 3、回车,新增数据(v-on.enter 添加数据)
<style type="text/css">
*{ padding: 0;margin: 0;list-style: none; }
.center{
width: 500px;
height: 500px; }
.cola{font-family: 宋体;font-size: 30px;text-align: center;margin-bottom: 10px;}
.input_text{width: 500px;
height: 50px; font-family: 宋体;font-weight: bold;font-size: 25px;border: none;
box-shadow: 5px -5px 5px 1px lightgray;
padding: 5px;}
.color{
background-color: white;
line-height: 50px; }
.destroy{
border: none;
background-color: transparent; font-size: 25px;
cursor: pointer;
float: right;
line-height: 50px;
margin-right:30px;
box-shadow: 1px -1px 2px 3px rgba(200,100,100,0.5);
border-radius: 50%;
}
.footer{width: 500px;height: 30px;font-family:"microsoft yahei";
font-size: 17px;padding: 5px;line-height: 30px;
box-shadow: 5px -5px 5px 1px lightgray;
display: flex;
justify-content: space-between;}
hr{
width: 510px;
color:red;
box-shadow: 1px -1px 5px 1px lightgray;
}
.pointer{
cursor: pointer;}
</style>