案例-小黑记事本

vue2
951 词
案例-小黑记事本

小黑记事本#

  • {{ index+1 }}.
合 计: {{ list.length }}

案例-小黑记事本#

功能需求:

  1. 列表渲染
  2. 删除功能
  3. 添加功能
  4. 底部统计和清空

删除功能#

li 添加 v-for 按数据渲染

按钮绑定 del() 点击传递当前数据的 id ，删除数据使用id来删除更具有可维护性 

<li class="todo" v-for="(item, index) in list" :key="item.id">
    <div class="view">
        <span class="index">{{ index+1 }}.</span>
        <label>{{ item.name }}</label>
        <button class="destroy" v-on:click="del(item.id)"></button>
    </div>
</li>
del(id) {
    this.list = this.list.filter(item => item.id !== id);
}

添加功能#

v-model 双向数据绑定，获取表单值

按钮绑定 add() ， unshift 方法用于在数组开头添加一个或多个元素，并返回修改后的数组的新长度

注意：

  1. 非空判断：表单为空不能添加
  2. 添加元素的 id 按文档要求填写，这里暂时以时间戳作唯一标识
  3. 添加完成后表单需要清空，双向数据绑定，数据改变视图改变，清空todoName即可
<input placeholder="请输入任务" class="new-todo" v-model="todoName" />
<button class="add" v-on:click="add">添加任务</button>
// 添加
// 通过v-model绑定输入框--实时获取表单元素内容
// 点击按钮,进行新增,往数组最前面加--unshift
add() {
    if (this.todoName.trim() === '') {
        alert('请输入任务名称');
        return;
    }
    this.list.unshift({
        id: +new Date(),
        name: this.todoName,
    });
    this.todoName = '';
}

统计和清空#

统计的是任务条数，即list中的元素条数

清空功能即清空list中的元素

清空后，底部文字无需再显示，可隐藏，对于这样的需要频繁隐藏显示的，使用 v-show ，list的长度大于0则显示 

<!-- 统计和清空 -->
<footer class="footer" v-show="list.length>0">
    <!-- 统计 -->
    <span class="todo-count">
        合 计:
        <strong>{{ list.length }}</strong>
    </span>
    <!-- 清空 -->
    <button class="clear-completed" v-on:click="clear">清空任务</button>
</footer>
clear() {
    this.list = [];
}