vue小白教程-4 想写啥写啥的小本本案例-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_40020935/article/details/108496740

需求分析：

功能需求：1.新增

新增列表结构（用v-for和数组）

获取输入端数据（用v-model绑定）

按回车保存（v-on.enter）

2.删除

v-on splice索引

3.统计

统计条数（v-textlength）

4.清空

点击清楚所有信息（v-on 删除数组）

5.隐藏

没数据时就隐藏（因为不频繁用v-if）

代码实现：

<!DOCTYPE html>
<html lang ="en">
<head>
    <meta charset="UFT-8">
    <meta name = "viewport" comtent ="width=device-width,initial-scale=1.0" >
    <meta http-equiv ="X-UA-Compatible" Content = "ie=edge">
    <title>实例：点击切换图片</title>
</head>

<body>
    <!--input bar-->
    <section id="todoapp">
        <header class="header">
            <h5>记事本</h5>
            <input v-model="inputValue" @keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="想写啥写啥的小本本" class="new-todo" >
        </header>
          <!--table-->
          <section class="main">
              <ul class="todo-list">
                  <li class="todo" v-for="(item,index) in list">
                      <div class="view">
                          <span class="index">{{index +1}}.</span>
                          <label>{{ item }}</label>
                          <button class="destory" @click="remove(index)"></button>
                      </div>
                  </li>
              </ul>
          </section>
          <!--Statistics and empty-->
          <footer class="footer"></footer>
            <span class="todo-count"><strong>{{ list.length }}</strong> items left</span>
            <button v-if="list.length!=0" class="clear-completed" @click="clear">
                clear
                </button>
            </footer>
        </section>
  
  <!--bottom-->
  <footer class="info"></footer>


    <script  src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#todoapp",
        data:{
           list:["哥斯拉",
           "猪血糕"],
           inputValue:"好好的"
        },
        motheds:{
            add:function(){
                this.list.push(this.inputValue);
            },
            remove:function(){
                console.log("删除");
                console.log(index);
                this.list.splice(index,1);
            },
            clear:function(){
                this.list=[];
            }
        },  
        })
    </script>
</body>
</html>

结果：