实战案例——记事本 + （笔记）-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_45783437/article/details/127050393

需求:

实现记事本的几大功能新增、删除、统计、清空、隐藏

  <body>
    <div id="app">
      <h2>记事本</h2>
      <!-- 新增 -->
      <div class="main">
        <!-- 输入框 -->
        <input type="text" v-model.trim="inputValue" @keyup.enter="add" autocomplete="off" placeholder="请输入" />
        <ul>
          <li v-for="(item,index) in list" :key="item.id">
            <!-- 下拉列表 -->
            <div class="content"><span>{{index+1}}</span> {{item}}</div>
      <!-- 删除 -->
            <button @click="list.splice(index,1)">❌</button>
          </li>
        </ul>
      <!-- 隐藏 -->
        <p class="empty" v-if="list.length == 0">空空如也...</p>
      </div>
      <div class="bottom">
      <!-- 统计 -->
        <span>合计:{{list.length}}</span>
      <!-- 清空 -->
        <span @click="list = []">清空</span>
    </div>
    <script src="http://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
      new Vue({
        el: '#app',
        data: {
          list:["好好学习","天天睡觉"],
          inputValue:"请输入内容"
        },
        methods:{
          add(){
            this.list.push(this.inputValue);
          }
        }
      })
    </script>
  </body>

效果图：

v-model 的修饰符 trim

作用:过滤掉内容左右两边的空格

<input type="text" v-model.trim="inputValue" @keyup.enter="add" autocomplete="off" placeholder="请输入" />