4、todo实例

最新推荐文章于 2022-06-22 15:55:20 发布

dengdengchen

最新推荐文章于 2022-06-22 15:55:20 发布

阅读量327

点赞数 1

CC 4.0 BY-SA版权

分类专栏：实习前端框架

本文链接：https://blog.youkuaiyun.com/dengdengchen/article/details/95480878

实习前端框架专栏收录该内容

18 篇文章

订阅专栏

本文介绍了如何实现一个Vue.js的Todo实例，包括页面实现和使用<el-input>与<input>的注意事项。此外，还详细讲解了如何封装本地缓存，通过创建src/model/storage.js文件来存储数据，并更新了引用方式以适应组件结构的变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、todo实例的实现

实现的页面

注：<el-input>没有click和keydown时间。当标签为<el-input>@keydown没有触发效果，只能使用<input>，如果觉得外观不好看，可以书写<input>的CSS样式，使其美观

以下是代码：

<template>
  <div id="app">
    <input
      type="text"
      v-model="msg"
      @keydown="addList($event)"
    />
    <el-button @click="addToList()">+增加</el-button>
    <hr>
    <br>
    <br>

    <h2>进行中</h2>
    <template v-for="(item,index) in list">
      <ul :key="index">
        <li v-if="!item.checked">
          <input
            type="checkbox"
            v-model="item.checked"
            @change="saveChange()"
          />
          {{item.title}}---------
          <el-button @click="deleteList(index)">-删除</el-button>
        </li>
      </ul>
    </template>

    <h2>完成时</h2>
    <template v-for="(item,index) in list">
      <ul :key="item.title">
        <!-- 两个key的值不能相同，但是这是两个不同的template模块，纳闷 -->
        <li v-if="item.checked">
          <input
            type="checkbox"
            v-model="item.checked"
            @change="saveChange()"
          />
          {{item.title}}---------
          <el-button @click="deleteList(index)">-删除</el-button>
        </li>
      </ul>
    </template>
  </div>
</template>
<script>
export default {
  data() {
    return {
      msg: '',
      list: [{
        title: '录制视频',
        checked: true
      }, {
        title: '录制ionic',
        checked: false
      }],
      huawei: ''
    }
  },
  methods: {
    addList(e) {
      console.log(e.keyCode)
      if (e.keyCode == 13) {
        this.list.push({
          title: this.msg,
          checked: false,
        })
        this.msg = ''
      }

      localStorage.setItem('list', JSON.stringify(this.list))
      //本地缓存
    },
    addToList() {
      this.list.push({
        title: this.msg,
        checked: false
      })
      this.msg = ''
      localStorage.setItem('list', JSON.stringify(this.list))
      //将数据转化为json格式
    },
    deleteList(num) {
      // alert(num)
      this.list.splice(num, 1)
      localStorage.setItem('list', JSON.stringify(this.list))
    },
    saveChange() {
      localStorage.setItem('list', JSON.stringify(this.list))    }
  },
  mounted() {
    // 生命周期函数    vue页面刷新就会触发的方法
    var list = JSON.parse(localStorage.getItem('list'))
    //获取之前的json格式数据
    if (list) {
      //注意判断，如果数据为空，赋值就会报错
      this.list = list
    }
  }
}
</script>
<style>
.el-input {
  width: 500px;
}
</style>

2、todo实例（封装本地缓存的方法）

注：因后期学过组件，文件位置发生了变化

目录结构

在src文件夹中新建model文件夹，存放storage.js文件

storage.js文件：

//封装localStorage本地存储方法

var storage = {
    set(key, value) {
        localStorage.setItem(key, JSON.stringify(value))
    },
    get(key) {
        return JSON.parse(localStorage.getItem(key))
    },
    remove(key) {
        localStorage.removeItem(key)
    }
}

export default storage;//将localStorage方法暴露出去，

因为组件问题，原先在App.vue的代码移到了Main.vue中，引用storage.js的代码变生变化，除此之外，没有发生改变

原先引用

import storage from './model/storage'

更改后引用

import storage from '../model/storage'

因template标签内容没有变化，就不贴代码了，

methods: {
    addList(e) {
      console.log(e.keyCode)
      if (e.keyCode == 13) {
        this.list.push({
          title: this.msg,
          checked: false,
        })
        this.msg = ''
      }

      storage.set('list', this.list)
    },
    addToList() {
      this.list.push({
        title: this.msg,
        checked: false
      })
      this.msg = ''
      storage.set('list', this.list)
    },
    deleteList(num) {
      // alert(num)
      this.list.splice(num, 1)
      storage.set('list', this.list)
    },
    saveChange() {
      storage.set('list', this.list)
    }
  },
  mounted() {
    var list = storage.get('list')
    if (list) {
      this.list = list
    }
  }