[JavaScript知识库]用Vue实现一个简单的记事本效果

html部分

<div id="app" v-cloak>
     <p class="title-Black">小黑记事本</p>
     <div class="head-box">
         <input class="record-box" type="text" placeholder="请输入非空的内容，点击加号记录" v-model.trim="todoLIST" @keyup.enter="addBox">
         <button class="record-but" @click="addBox">+</button>
     </div>
     <table>
         <tr v-for="(item,index) in todoList">
             <td @dblclick="dblclickBox(index)">{{index+1}}.{{item.name}}</td>
             <td>
                 <a class="remove-btn" @click="removeList(index)">x</a>
             </td>
         </tr>
     </table>

     <input type="text" class="base-box" placeholder="双击栏目删除对应数据">
 </div>```
## css部分
```css
 <style>
 [v-cloak]{
     display: none;
 }
 #app {
     width: 303px;
     min-height: 400px;
     margin: 0 auto;
     text-align: center;
     position: relative;
 }

 .title-Black {
     width: 100%;
     height: 20px;
     font-size: 20px;
     font-weight: bold;
 }

 .record-box {
     width: 250px;
     height: 40px;
     font-weight: bold;
     display: block;
     float: left;
 }

 .record-but {
     width: 40px;
     height: 46px;
     font-weight: bold;
     font-size: 30px;
     line-height: 40px;
     display: block;
     float: left;
     margin-left: 5px;
 }

 ul {
     list-style: none;
 }
 a{
     text-align: center;
 }
 .base-box {
     width: 100%;
     height: 40px;
     position: absolute;
     bottom: 0;
     float: right;
     display: block;
     margin: 0 auto;
     border: none;
     text-align: center;
 }

 .head-box {
     height: 50px;
 }

 .remove-btn {
     display: block;
     width: 25px;
     height: 24px;
     font-size: 16px;
     line-height: 20px;
     float: right;
     border: 1px solid #ccc;
 }

 tr {
     width: 100%;
     font-weight: bold;
     font-size: 16px;
 }

 td {
     width: 100%;
     height: 30px;
     text-align: left;
     margin: 5px 0px;
     border-bottom: 1px solid #ccc;
 }
</style>```
## vue引入以及vue部分
``<script src="../lib/vue.js"></script>
<script>
 const app = new Vue({
     el: "#app",
     data:{
         todoList:[
             // {
             //     name:"睡觉觉"
             // },{
             //     name:"睡觉觉"
             // }
         ],
         // 定义一个空数组，用来接收传提交进来的值
         todoLIST:[]
     },
     methods:{
         // 点击删除相应的td栏
         removeList(index){
             this.todoList.splice(index,1)
         },
         // 点击+号添加td原素
         addBox(){
             // 如果输入的值为空，则返回出去不执行
             if(this.todoLIST == "")return
             this.todoList.push({
                 name:this.todoLIST,
             })
             // 执行完添加元素后，把输入框里面的值赋值为空
             this.todoLIST=""
         },
         // 双击栏目删除对应的td栏目
         dblclickBox(index){
             this.removeList(index)
         }
     }
 })
</script>
### 最后效果
![在这里插入图片描述](https://img-blog.csdnimg.cn/7dad83027e094cc1be4c08c847af94a7.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0N6aG9uZ3lp,size_16,color_FFFFFF,t_70#pic_center)